런타임에 HTML5 Canvas에서 Square를 그릴 수 있습니까?

Question

HTML5 Project에서 작업 중입니다. 사각형 (fillRectStrokeRect)을 그릴 수있는 그리기 그래픽 API가 있습니다. 그러나 어떻게 사각형을 그릴 수 있습니까? 나는 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에게 그것을 그리기 위해 다음과 같은 방법을 시도했다.

Demo

당신이 원에서 가장 큰 광장에 맞게하려는 경우, 주석에서 말하는 것처럼

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

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

, 그것은 더 수학에 대한 코드보다 관련입니다. 나는 그것을 당신에게 설명하려고 노력할 것이다. 그러나 당신은 아마 인터넷의 다른 곳에 더 나은 시각적 인 설명을 찾을 것이다.

사각형을 두 개의 똑같은 부분으로 나누는 방식으로 원의 지름을 그립니다. 이제 한 부분은 직각 삼각형이며, 두 변의 길이는 같습니다. 직경을 알고 있습니다. Pythogorean 정리를 사용하면이 방정식을 얻을 수 있습니다 : side^2 + side^2 = diameter^2.

이제 측면을 찾아 보겠습니다. 이제 side^2 = (diameter^2)/2
side = Math.sqrt((diameter^2)/2)

2(side^2) = diameter^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