0

HTML5 プロジェクトに取り組んでいます。Rectangle (fillRectStrokeRect) を描画するための描画グラフィックス API があります。しかし、どうすれば 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();
4

1 に答える 1

2

幅と高さが等しいfillRectorを使用します。strokeRect

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

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

デモ

コメントで言っているように、最大​​の正方形を円に収めたい場合は、コードよりも数学に関連しています。私はあなたにそれを説明しようとしますが、おそらくインターネット上の他の場所でより良い、より視覚的な説明を見つけるでしょう.

正方形を 2 等分するように円の直径を描きます。これで、1 つの部分が直角三角形になり、2 つの辺が等しくなります。私たちは直径を知っています。ピトゴラスの定理を使用すると、次の式が得られます 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);

これにより、キャンバス上のどこをクリックしても、円の中に正方形が描画されます。

デモ

于 2012-09-06T13:51:39.050 に答える