Question

此解决方案有效，问题是当用户点击提交时，正在绘制的项目与最后一个项目保持重叠。所以我可以点击halfcircle单选按钮，然后点击二次曲线，它们只是相互重叠。

我怎么能把它变成mkae所以这些项目不重叠，一次只显示一个

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <form>
        <input type="radio" name="radio" id="rd1" value="Show Arc" checked="checked"/>Show Arc<br>
        <input type="radio" name="radio" id="rd2" value="Show Half Circle"/>Show Half Circle<br>
        <input type="radio" name="radio" id="rd3" value="Show Circle"/>Show Circle<br>
        <input type="radio" name="radio" id="rd4" value="Show X"/>Show X<br>
        <input type="radio" name="radio" id="rd5" value="Show Quadratic Curve"/>Show Quadratic Curve<br><br>
        <input type="submit" id="button" value="Submit"/>
    </form>
    <canvas id="canvas" width="500" height="500">
        Get a new browser
    </canvas>
    <script src="Lesson3.js"></script>
</body>
</html>

JS

var button = document.getElementById('button');
var rd1 = document.getElementById('rd1');
var rd2 = document.getElementById('rd2');
var rd3 = document.getElementById('rd3');
var rd4 = document.getElementById('rd4');
var rd5 = document.getElementById('rd5');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

button.addEventListener('click', function(){
if(rd1.checked){
showArc();
}
else if(rd2.checked){
showHalfCircle();
}
else if(rd3.checked){
showCircle();
}
else if(rd4.checked){
showX();
}
else if(rd5.checked){
showQuadraticCurve();
}
else{ alert('nothing to show');
}
}, false);


function showArc(){
context.beginPath();
context.arc(250,250,200,Math.PI/180*90,Math.PI/180*270,false);    
context.stroke();
}

function showHalfCircle(){
context.beginPath();
context.arc(250,250,200,Math.PI/180*90,Math.PI/180*270,false);
context.closePath();
context.stroke();
}

function showCircle(){
context.beginPath();
context.arc(250, 250, 200, 0, Math.PI*2, true); 
context.closePath();
context.fill();
}

function showX(){
context.beginPath();
context.moveTo(0,0);
context.lineTo(500,500);
context.stroke();
context.moveTo(500,0);
context.lineTo(0,500);
context.stroke();
}

function showQuadraticCurve(){
context.beginPath();
context.moveTo(130,130);
context.quadraticCurveTo(150.8, 130, 160.6, 150.5);
context.quadraticCurveTo(190, 250, 210.5, 160.5);
context.quadraticCurveTo(240, 100.5, 290, 70.5);
context.stroke();
}

Answer 1

不确定为什么需要表单中的元素。尽管如此 - 在你粘贴当前代码之前我开始为你找到一个解决方案，所以我选择了更简单的svg.js库和一些jQuery来让我更快地解释。你应该能够简单地改变我所做的事情以满足你的需求。

http://jsfiddle.net/hv6s2/

以下是代码 - 不包括库脚本

<!-- HTML -->
<div id="drawing"></div>

<form name="imageselect">
    <ul>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/1/" /> Image 1</label></li>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/2/" /> Image 2</label></li>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/3/" /> Image 3</label></li>
        <li><label><input type="radio" name="image" value="showArc" /> Arc</label></li>
        <li><label><input type="radio" name="image" value="showHalfCircle" /> Half Circle</label></li>
    </ul>
    <input type="submit" name="select" />
</form>

将它放在.js文件中

// Javascript
// create your own external script references to http://www.svgjs.com/
// and http://www.jquery.com
jQuery(function() {
    /* create an svg drawing */
    var canvas = SVG('drawing').size(500,500),

    /* perhaps you wanted to load an image? */
        image;

    /* set a bunch of default shapes references */
    var shapes = {
        showArc: function(canvas) {
            // `this` is reference to the form
            // do your drawing...
            console.log('showArc');
        },
        showHalfCircle: function(canvas) {
            // `this` is reference to the form
            // do your drawing...
            console.log('showHalfCircle');
        }
    }

    jQuery('form').on('submit', function(e) {
        e.preventDefault();

        // start over
        canvas.clear();

        jQuery.each($('form').serializeArray(), function(i, field) {
            if (field.name == 'image') {
                func = field.value;
                return false;
            }
        });

        if (jQuery.isFunction(shapes[func])) {
            shapes[func].apply(this, canvas);
        } else {
            image = canvas.image(func, 500, 500);
        }
    });
});

HTML 5 Canvas和JS

1 个答案: