如何在运行时在HTML5画布中绘制正方形

How can i draw a Square in HTML5 Canvas at run time?

本文关键字：布中 绘制 正方形 HTML5 运行时      更新时间：2023-09-26

我正在做一个HTML5项目。有一个绘图图形API可以绘制矩形（fillRectStrokeRect）。但我如何绘制SQUARE。我试着用下面的方法画它代码

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

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

var x = 0, y = 0,
    side = 10;
ctx.fillRect(x, y, side, side);

演示

正如你在评论中所说，如果你想把最大的正方形放在一个圆圈里，它更多地与数学有关，而不是与代码有关。我会尽力向你解释，但你可能会在互联网上的其他地方找到更好、更直观的解释。

画圆的直径，使它把你的正方形分成两个相等的部分。现在有一部分是直角三角形，它的两条边相等。我们知道直径。使用勾股定理，可以得到以下方程：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);

这会在你点击画布的任何地方画一个圆圈里的正方形。

演示

相关文章：