1

私は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に変更すると、円ではなく別の形状になります。

4

1 に答える 1

2

このコードを試すことができます：

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>

于 2012-09-05T09:16:38.977 に答える