如何在運行時在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畫布上繪製正方形？

回答

相關問題