Question

我正在开发一个HTML5项目。有一个绘图图形API来绘制Rectangle（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();

Answer 1

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

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

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

Demo

正如你在评论中所说，如果你想要拟合一个圆圈中的最大正方形，那么它与数学有关，而不是代码。我会尝试向你解释，但你可能会在互联网上找到更好，更直观的解释。

以将正方形划分为两个相等部分的方式绘制圆的直径。现在一个部分是一个直角三角形，其两边相等。我们知道直径。使用Pythogorean定理，你得到这个等式： 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);

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

Demo

如何在运行时在HTML5 Canvas中绘制一个Square？

1 个答案: