Question

椭圆颜色顺序（从左到右）应为红色，黄色，黑色，黄色和红色这里是代码http://liveweave.com/Jq2xhr

我的保存和恢复出错了什么？

Answer 1

保存和恢复没有出错问题在于，由于您没有为每个弧使用beginPath，因此每次调用fill（）时，都会使用新颜色重新填充弧。
你的第三个圆圈被填满黑色，然后变成黄色，最后再变成红色这应该解决它。

/* Write JavaScript here */
var canvas=document.getElementById('m');
var ctx=canvas.getContext('2d');

//儲存canvas會存在Stack內。Stack特性是最後儲存的數值會最先顯示，所以如果呼叫restore方法，會顯示最近的描繪狀態，在呼叫一次的話就會顯示之前的狀態。//

ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(80, 80, 50, 0, Math.PI*2, true);//arc(x,y,r,starAngle, endAngle,  anticlockwise)   
ctx.fill();
ctx.save();

ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(210, 80, 50, 0, Math.PI*2, true);
ctx.fill();
ctx.save();

ctx.beginPath();
ctx.fillStyle="#000000";
ctx.arc(340, 80, 50, 0, Math.PI*2, true);
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(470,80, 50, 0, Math.PI*2, true);
ctx.fill();


ctx.beginPath();
ctx.restore();
ctx.arc(600, 80, 50, 0, Math.PI*2, true);
ctx.fill();

<!DOCTYPE html>
<html>
<head>
<title>使用save和restore繪製圖形</title>
</head>
<body>
<!-- Start your code here -->

<p class="lw"></p>
  <canvas id="m" width="1000" height="200"></canvas>
<!-- End your code here -->
</body>
</html>

Canvas save（）和restore（）运行不正常

1 个答案: