HTML 5畫布和JS

這個解決方案的工作原理是，當用戶點擊提交正在繪製的項目只是保持與最後一個重疊時，問題是。所以我可以點擊半圓單選按鈕然後是二次曲線，它們只是重疊在一起。HTML 5畫布和JS

我怎麼能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>

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(); 
}

來源

2014-02-26 user2939808

你的問題問了太多的問題，＃1！相反，如果您有特定的編碼問題，請嘗試做一點點Google加上一些編碼，然後再回來。 ...並享受一路上的學習！乾杯! – markE

我的不好，讓我把我的代碼，看看你能不能幫我找出我要去哪裏錯 – user2939808

添加我的代碼。你能看到我在搞亂嗎？ – user2939808

不知道爲什麼你需要表單中的元素。儘管如此 - 在您粘貼當前代碼之前，我開始爲您提供解決方案，因此我選擇了更簡單的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); 
     } 
    }); 
});

來源

2014-02-26 03:16:57

我確實按照自己的方式工作。問題是它不斷地把圖像放在antoher上，另一個.....你看我的代碼中哪裏出錯了嗎？感謝你爲我付出的努力。 – user2939808

我想要畫一個新的畫布之前清除畫布（或者至少是當前的形狀）。快速搜索引導我到另一個答案SO： http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing –

謝謝一堆，這正是我需要的 – user2939808

回答

相關問題