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

我正在研究HTML5项目。有绘制图形API来绘制矩形（fillRectStrokeRect）。但我如何绘制一个SQUARE。我曾尝试以下方法来绘制 CODE如何在运行时在HTML5画布上绘制正方形？

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

来源

2012-09-06 Shanky

使用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

来源

2012-09-06 13:51:39

谢谢阿南。但是我想在运行时在一个正方形内画圈。 – Shanky

@Shanky补充说，答案。 –

阿曼它为我工作，但我有一点点查询我怎样才能在运行时，以不同的半径做一个圆。 – Shanky

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

回答

相关问题