javascript - 如何在运行时在 HTML5 Canvas 中绘制正方形？

Question

我正在开发一个 HTML5 项目。有一个绘图图形 API 可以绘制矩形(fillRectStrokeRect)。但是我如何绘制一个正方形。我尝试过以下方式来绘制它代码

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();

Answer 1

使用宽度和高度相等的fillRect或StrokeRect。

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

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

Demo

正如您在评论中所说，如果您想将最大的正方形放入圆中，那么它与数学的关系比与代码的关系更大。我将尝试向您解释它，但您可能会在互联网上的其他地方找到更好、更直观的解释。

画出圆的直径，将正方形分成两等份。现在一部分是一个直 Angular 三 Angular 形，它的两条边相等。我们知道直径。使用勾股定理，您可以得到以下方程:边^2 + 边^2 = 直径^2。

现在让我们找到侧面。

2(边^2) = 直径^2
边^2 =(直径^2)/2
side = Math.sqrt((直径^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);

无论您在 Canvas 上单击什么位置，都会在圆内绘制一个正方形。

Demo