爲什麼在畫布中填充（）屬性overwittern？

我是學習者html5畫布當我嘗試繪製2個圓圈（圓圈內的一個圓圈）。當我畫一個圓圈並填充它時，它就起作用了。當我畫第二個圓圈並填充它。它變成第二個填充樣式的第一個圓。爲什麼在畫布中填充（）屬性overwittern？

我試圖創建的是灰圈中的橙色圓圈。我嘗試了很多時間來解決這個問題，但通過每種方式它得到的問題..

請檢查我的代碼，讓我知道如果我錯了或如何解決這個問題。

我有下面的代碼

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> 
    <style> 
body{ 
} 
#mycanvas{ 
    border:1px solid #000; 
    margin:0px auto; 
    display:block; 
} 
#mycanvas1{ 
    border:1px solid #000; 
    margin:0px auto; 
    display:block; 
} 
</style>

<body> 

<canvas id="mycanvas" width="200" height="200"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas> 
<canvas id="mycanvas1" width="200" height="200"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script type="text/javascript"> 
    var c = document.getElementById("mycanvas"); 
    var b = document.getElementById("mycanvas1"); 
    var d = document.getElementById("mycanvas1"); 
    var ctx = c.getContext("2d"); 
    var ctx1 = b.getContext("2d"); 
    var ctx2 = d.getContext("2d"); 
    ctx.fillStyle = "#bddfb3"; 
    ctx.fillRect(0,0,200,200); 
    ctx.moveTo(0,0); 
    ctx.lineTo(200,200); 
    ctx.stroke(); 

    ctx1.fillStyle = "#f1b147"; 
    ctx1.arc(100,100,80,0,360); 
    ctx1.fill(); 

    ctx2.fillStyle = "#222"; 
    ctx2.arc(100,100,50,45,180); 
    ctx2.fill(); 
    ctx1.fillStyle="#fff"; 
    ctx1.font="72px Arial"; 
    ctx1.fillText("i",90,125); 

</script> 

</body> 
</html>

來源

2014-10-17 aditi

你好阿迪提。請檢查此鏈接 - http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/ – 2014-10-17 10:06:02

這是在畫布上繪製一個灰色圓圈裏面一個橙色圓圈一個簡單的方法。

var canvas = document.getElementById('canvas'), 
 
    ctx = canvas.getContext('2d'); 
 

 
// orange circle 
 
ctx.beginPath(); 
 
// centerX, centerY, radius, start angle, end angle, counterclockwise 
 
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false); 
 
ctx.fillStyle = 'orange'; 
 
ctx.fill(); 
 

 
// grey circle 
 
ctx.lineWidth = 25; 
 
ctx.strokeStyle = 'grey'; 
 
ctx.stroke();

<canvas id="canvas" width="500" height="250"></canvas>

來源

2014-10-17 11:56:22 James

爲什麼在畫布中填充（）屬性overwittern？

回答

相關問題