为什么在画布中填充（）属性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？

回答

相关问题