Question

我注意到我不需要偏置圆以使其居中。它会自动居中吗？如果是这样，为什么与rect，fillRect，fillText和strokeText方法不同？（这些都必须偏移才能居中）

Answer 1

是的，完整的arc()（即一个圆圈）将以您传递给它的x和y参数为中心。这两个参数定义了将绘制的椭圆的 origin 。

您是对的，它与rect()（及其等效的 fill / stroke 方法）有很大不同，后者实际上是

的简写

lineTo(x, y);
lineTo(x + width, y);
lineTo(x + width, y + height);
lineTo(x, y + height);
lineTo(x, y);

所以我们可以说 rect 方法的原点是它的左上角，就像 drawImage 和 putImageData 一样。方法。

但是，fillText()的来源可以通过设置上下文的textAlign和textBaseline属性来控制，因此这是完全不同的。

对于其他路径方法，它们使用控制点，因此原点的概念并没有真正应用在那里。

var x = 250;
var y = 100;
var txt = ['click to redraw the rect', 'using the long-hand version'];

var ctx = canvas.getContext("2d");
ctx.font = '14px sans-serif';
var w = ctx.measureText(txt[1]).width;
// fillText origin can be set
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText(txt[0], x, y - 8);
ctx.fillText(txt[1], x, y + 8);
// rect / strokeRect / fillRect is top-left
ctx.strokeRect(x, y, w, 16);
// arc is x,y
ctx.arc(x, y, w / 2, 0, Math.PI * 2);
ctx.stroke();
// show that rect is just a shorthand
onclick = function() {
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineTo(x, y);
  ctx.lineTo(x + w, y);
  ctx.lineTo(x + w, y + 16);
  ctx.lineTo(x, y + 16);
  ctx.lineTo(x, y);
  ctx.stroke();
}

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

Answer 2

否，它不会自动居中。从MDN检查this article：

参数： x 圆心的x轴坐标

否，除非您在当前路径上，否则您必须指定它

canvas.getContext（'2d'）。arc（）方法是否居中？

2 个答案: