JSキャンバスでctxの回転線

Question

JavaScriptキャンバスで次のような三角形の基本図を作成した場合、中心に沿って30度回転させるにはどうすればよいでしょうか？これはrectではないため、可能な複製とは少し異なります。これは原点に沿った一連の線です。

// Rotate 30 degrees when origin is (5,5) 
ctx.beginPath(); 
ctx.moveTo(5,0); 
ctx.lineTo(10,10); 
ctx.lineTo(0,10); 
ctx.lineTo(5,0); 
ctx.stroke(); 

したがって、通常の三角形を見るのではなく、少し傾いた三角形が表示されます。

ありがとうございます！

Answer 1

あなたが達成できることをキャンバスのrotate方法を使用して

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var deg = 30; 
 

 
ctx.save(); // save canvas 
 

 
ctx.rotate(deg * Math.PI/180); // rotate canvas 
 

 
ctx.beginPath(); 
 
ctx.moveTo(5,0); 
 
ctx.lineTo(10,10); 
 
ctx.lineTo(0,10); 
 
ctx.lineTo(5,0); 
 
ctx.stroke(); 
 

 
ctx.restore(); // restore canvas

<canvas id="canvas" width="218" height="218" style="border:1px solid #d3d3d3"></canvas>

注：回転する前に、キャンバスの状態を保存していることを確認し、描画した後、それを復元将来の図面が回転されないように三角形を作成します。

Answer 2

最適なオプションは、独自のローカル座標系で三角形を定義することです。キャンバスを動かす予定がある場合はキャンバスの原点に従う必要があります。しかし、三角形の位置と回転だけを変更する必要はありません。

したがって、三角形を独自の座標系の点の集合として定義します。ここで、0,0は回転の中心です。点のセットから形状を描画する

// you had 
/* 
ctx.moveTo(5,0); 
ctx.lineTo(10,10); 
ctx.lineTo(0,10); 
ctx.lineTo(5,0); */ 

// subtracting 5 from x and y to give 
var triangle = [0,-5,5,5,-5,5]; // dont need the last point will use closePath 

機能は人生少し楽に

function drawShape(shape, close){ 
    var i = 0; 
    ctx.beginPath(); 
    ctx.moveTo(shape[i++], shape[i++]); 
    while(i < shape.length){ 
     ctx.lineTo(shape[i++], shape[i++]); 
    } 
    if(close){ ctx.closePath() } 
    ctx.stroke(); 
} 

今すぐ変換

function setPosScaleRotation(x,y,scale,rot){ 
    ctx.setTransform(scale,0,0,scale,x,y); 
    ctx.rotate(rot); 
} 
// and a function to restore the default transform 
function restoreDefaultTransform(){ 
    ctx.setTransform(1,0,0,1,0,0); 
} 

を設定する機能は、今では描きやすいです作りますあなたが望む形状

setPosScaleRotation(5,5,1,deg * Math.PI/180); // 30Pi/180 = 3Pi/18 = Pi/6 
drawShape(triangle,true); 

それとも

drawShape(triangle, true, 5, 5, 1, Math.PI /6); 
drawShape(triangle, true, 100, 100,1, Math.PI + Math.PI/6); // draw at 100,100 at 180 from other triangle