Question

我正在开发一个HTML5项目。在那，我在绘制圆圈时遇到问题。我有画布加载图像。当我要绘制一个圆圈时，我正在创建一个新的画布（动态），我想在其中画圆圈。但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>

如何在html5画布中绘制圆圈作为单个画布？

1 个答案: