Question

我试图绘制两个在一起的圆圈

但是浏览器在第二个圈内画了一条额外的行为什么？

var canvas = document.getElementById('convas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "orange";
ctx.lineWidth = 25;
ctx.arc(160, 160, 100, 0, Math.PI * 2, false);
ctx.stroke();
ctx.moveTo(100, 100);
ctx.arc(150, 150, 40, 0, Math.PI * 2, false);
ctx.lineWidth = 20;
ctx.stroke();

<div class="center">
  <canvas id="convas" style="background: grey" width="300" height="300">
    here will go report chart if you see this text it mean your browser dont support canvas!
    so update your browser.
</canvas>
</div>

Answer 1

这是因为arc方法会自动在当前x和y位置与弧线绘制开始之间绘制lineTo（此处为100, 100。

由于当arc参数设置为startAngle时，0绘图从绘制弧的3点开始，您需要将moveTo(100, 100)更改为{{ 1}}即moveTo(arcX + arcRadius, arcY)。

moveTo(190, 150)

var canvas = document.getElementById('convas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "orange";
ctx.lineWidth = 25;
ctx.arc(160, 160, 100, 0, Math.PI * 2, false);
ctx.stroke();
ctx.moveTo(190, 150);
ctx.arc(150, 150, 40, 0, Math.PI * 2, false);
ctx.lineWidth = 20;
ctx.stroke();

但您可能还会注意到，当您第二次拨打<div class="center"> <canvas id="convas" style="background: grey" width="300" height="300"> here will go report chart if you see this text it mean your browser dont support canvas! so update your browser. </canvas> </div>时，第一次也会重新绘制，这次将stroke()设置为lineWidth。为避免这种情况，请在绘制第一个圆后调用20，以便上下文可以知道您正在定义新路径，而不是继续当前路径。在这里，你甚至不再需要ctx.beginPath：

moveTo

var canvas = document.getElementById('convas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "orange";
ctx.lineWidth = 25;
ctx.arc(160, 160, 100, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI * 2, false);
ctx.lineWidth = 20;
ctx.stroke();

画布一起画2圈

1 个答案: