任意の点を中心に回転：HTML5キャンバス

Question

驚くべき消滅長方形が見えます！

真剣に私は本当に単純なHTML5キャンバスを持っています（理由はのため、矩形の代わりにlineToを使用してを使用しています）。

問題：私は矩形を90度回転しようとしています。長方形は90度回転する必要がありますが、代わりに消えます。

HTML5キャンバスで複雑なポリゴンを回転させると私のウェブアプリケーションで奇妙なx、y配置エラーが発生するので、回転をテストするためにこの単純なHTMLを作成しました& x、yの点100,100 。しかし、これでも形状を回転しようとすると、奇妙な結果になります。

どのように私の矩形を表示する方法を教えてもらえますか& x、yの値を完全に変更することなく、ポリゴンを特定の点で回転させる方法を教えてください。

この問題をHTML5キャンバスの「&解決済みの問題を経験したことがありますか？

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;"> 

</canvas> 
<script type="text/javascript"> 

    var canvas = document.getElementById("testCanvas"); 
    var dc  = canvas.getContext("2d"); 

    dc.clearRect(0, 0, canvas.width, canvas.height); 

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.rotate(90*Math.PI/180); // rotate 90 degrees 
    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
--> 
</script> 

Answer 1

ポイント周りを回転させるには、3つのステップを実行する必要があります。

• まず、コンテキストを回転させたいセンターに翻訳します。
• 次に、実際の回転を行います。
• 次に、コンテキストを翻訳し直します。このよう

：

var canvas = document.getElementById("testCanvas"); 
var dc  = canvas.getContext("2d"); 
var angle = 0; 
window.setInterval(function(){ 
    angle = (angle + 1) % 360; 
    dc.clearRect(0, 0, canvas.width, canvas.height); 

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.translate(150,200); 
    dc.rotate(angle*Math.PI/180); 
    dc.translate(-150,-200); 

    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
}, 5); 

Answer 2

キャンバスを回転させると、キャンバスは原点（0、0）から回転し、矩形が回転して画面から外れます。

それだけ45°回転だ場合、この例を参照してください。この問題を解決するためhttp://jsfiddle.net/wjLSm/

一つの方法は、その幅&高さ/ 2によりキャンバスを翻訳することである：http://jsfiddle.net/wjLSm/1/（その後0,0中間にある - ですこれを意識してください）