Зачем заполнять() свойство переопределять в холсте?

Я ученик html5 холст Когда я пытаюсь нарисовать 2 круга (круг в круге). Когда я рисую круг и заполняю его, он работает. , когда я рисую второй круг и заполняю его. он превращается в первый круг со вторым стилем заполнения.Зачем заполнять() свойство переопределять в холсте?

Что я пытаюсь создать, это оранжевый круг в сером круге. Я пытаюсь много раз, чтобы решить эту проблему, но по-любому это проблема.

Пожалуйста, проверьте мой код и дайте мне знать, если я ошибаюсь или что делать, чтобы исправить эту проблему.

У меня следующий код

<!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/ –

Это простой способ сделать оранжевый круг внутри серый круг на холсте.

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

Зачем заполнять() свойство переопределять в холсте?

ответ

Смежные вопросы