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

我注意到我不需要偏移圆来使它们居中。它是自动居中的吗？如果是这样，为什么它不同于

rect

、

fillRect

、

fillText

和

strokeText

方法？（这些方法都必须偏移才能居中）

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

参数：

x

圆中心的x轴坐标

因此，不，您必须指定它，除非它位于当前路径上

是，一个完整的

弧（）

（即一个圆）将以传递给它的

x

和

y

参数为中心。这两个参数定义将要绘制的椭圆的原点

没错，它与

rect（）

（及其填充/笔划等价物）方法有很大不同，后者实际上是

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

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

但是，可以通过设置上下文的

textAlign

和

textbelineline

属性来控制一个的

fillText（）

原点，因此这个是完全不同的

对于其他路径方法，它们使用控制点，所以原点的概念在那里并不适用

var x=250；
变量y=100；
var txt=[“单击以重新绘制矩形”，“使用长手版本”]；
var ctx=canvas.getContext（“2d”）；
ctx.font='14px无衬线'；
var w=ctx.measureText（txt[1]）宽度；
//可以设置fillText原点
ctx.textb基线='中间'；
ctx.textAlign='中心'；
ctx.fillText（txt[0]，x，y-8）；
ctx.fillText（txt[1]，x，y+8）；
//rect/strokeRect/fillRect位于左上角
ctx.strokeRect（x，y，w，16）；
//弧是x，y
ctx.弧（x，y，w/2，0，Math.PI*2）；
ctx.stroke（）；
//显示rect只是一个速记
onclick=function（）{
ctx.beginPath（）；
ctx.strokeStyle=‘红色’；
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（）；
}