javascript - 如何在 html5 Canvas 中将圆圈作为单独的 Canvas 绘制？

Question

我正在处理一个 HTML5 项目。 在那，我在画圆圈时遇到了问题。我有加载图像的 Canvas 。当我要画一个圆圈时，我正在创建一个新 Canvas (动态地)，我想在其中画圆圈。但是 Circle 绘制不正确。 我怎样才能摆脱这个问题？

编辑:-

绘图代码如下:-

getMouse(e);
x2=mx; y2=my;
var width=x2-x1;
var height=y2-y1;
annCanvas.style.position = "absolute";

annCanvas.style.left=""+x1+"px";
annCanvas.style.top=""+y1+"px";
annCanvas.width=width+4;
annCanvas.height=height+4;
annCanvas.style.zIndex="100000";

document.getElementById("canvas").appendChild(annCanvas);

var kappa = .5522848;
 ox = ((width) / 2) * kappa, // control point offset horizontal
 oy = ((height) / 2) * kappa, // control point offset vertical
 xe =(width),           // x-end
 ye =(height),           // y-end
 xm = (width)/ 2,       // x-middle
 ym =  (height) / 2;       // y-middle
 annCanvasContext=annCanvas.getContext('2d');
 annCanvasContext.beginPath();
 annCanvasContext.lineWidth=4;
 annCanvasContext.moveTo(2, ym);
 annCanvasContext.bezierCurveTo(2, ym - oy, xm - ox, 2, xm, 2);
 annCanvasContext.bezierCurveTo(xm + ox, 2, xe, ym - oy, xe, ym);
 annCanvasContext.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
 annCanvasContext.bezierCurveTo(xm - ox, ye, 2, ym + oy, 2, ym);
 annCanvasContext.closePath();
 annCanvasContext.stroke();

如果我将 lineWidth 更改为 10 或 15，它会变成不同的形状而不是圆形。

Answer 1

你可以试试这段代码:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>