0

我正在研究一个 HTML5 项目。有一个绘图图形 API 来绘制矩形 (fillRectStrokeRect)。但是我如何绘制一个 SQUARE。我尝试了以下方式来绘制它 CODE

getMouse(e);
x2=mx; y2=my;
var width=endX-startX;
var height=endY-startY;

annCanvasContext.beginPath();
annCanvasContext.lineWidth=borderWidth;
var centerX=width/2;
var centerY=width/2;
var radius=width/2;
annCanvasContext.arc(centerX+5, centerY+5, radius, 0, 2 * Math.PI, false);
annCanvasContext.stroke();
4

1 回答 1

2

使用fillRect或strokeRect宽度和高度相等。

var x = 0, y = 0,
    side = 10;

ctx.fillRect(x, y, side, side);

演示

正如您在评论中所说，如果您想将最大的正方形放在一个圆圈中，那么它与数学有关而不是与代码有关。我会尝试向您解释，但您可能会在 Internet 的其他地方找到更好、更直观的解释。

以将正方形分成两个相等部分的方式绘制圆的直径。现在一部分是一个直角三角形，它的两条边相等。我们知道直径。使用勾股定理，你得到这个方程： side^2 + side^2 = diameter^2。

现在让我们找到一边。

2(side^2) = diameter^2
side^2 = (diameter^2)/2
side = Math.sqrt( (diameter^2)/2 )

现在，把它变成代码。

var ctx = document.getElementById('canvas').getContext('2d'),
    radius = 20;

ctx.canvas.addEventListener('click', function (e){
    ctx.fillStyle = 'black';
    ctx.arc(e.pageX, e.pageY, radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = 'red';
    var diameter = radius * 2;
    var side = Math.sqrt( (diameter * diameter)/2 );
    ctx.fillRect(e.pageX - side/2, e.pageY - side/2, side, side);
    ctx.closePath();
}, false);

无论您在画布上单击何处，这都会在圆圈内绘制一个正方形。

演示

于 2012-09-06T13:51:39.050 回答