javascript - canvas.getContext ('2d' ).arc() 方法是否居中？

Question

我注意到我不需要偏移圆圈来使它们居中。是自动居中吗？如果是这样，为什么它与 rect、fillRect、fillText 和 StrokeText 方法不同？(这些方法都有偏移居中)

Answer 1

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

你是对的，它与 rect() (及其 fill/border 等效项)方法有很大不同，后者实际上是

的简写

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

因此我们可以说 rect 方法的起源将是它的左上角，就像 drawImage 和 putImageData 的起源一样方法。

但是，可以通过设置上下文的 textAlign 和 textBaseline 属性来控制其中一个的 fillText() 原点，所以这个相当不同。

对于其他路径方法，它们使用控制点，因此原点的概念并不真正适用于此。

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>