フルサイズのキャンバスを回転させる

Question

キャンバスに描画する単純な（今のところ）アプリケーションをやっています。 ドット、四角、線などの単純な図形を描くことはできますが、画像全体を回転しようとすると何も起こりません。エラーも回転もありません。どこに問題があるのか​​を教えてください。

キャンバスがonwindowresize機能によってウィンドウサイズに更新されます。再描画機能よりも

function placeDot(x,y){ 
if(document.getElementById('colors').hasAttribute('chosen')){ var color = document.getElementById('colors').getAttribute('chosen');}else{ var color = 'rgba(0,0,0,1)'; } 
var canvas = document.getElementById("canvas"); 
if(canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    ctx.fillStyle = color; 
    ctx.beginPath(); 
    ctx.arc(x-2,y-2,5,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.restore(); 
} 
save("//Dot("+x+","+y+",5,'"+color+"')"); 
return false; 
} 

：

function adaptSize() { 
    var canvas = document.getElementById('canvas'); 
    // set size to window 
    canvas.setAttribute('width',window.innerWidth); 
    canvas.setAttribute('height',window.innerHeight); 
    var ctx = canvas.getContext("2d"); 
    // set state size to window 
    ctx.width = window.innerWidth; 
    ctx.height = window.innerHeight; 
    drawSaved(); 
    inform('Canvas re-drawed - window resized'); 
} 

各描画機能は、ドットを配置例えば、再ドローにinlocalstorage自身を保存します。

function drawSaved(){ 
var picture = localStorage.getItem("picture"); 
var drawstate =document.getElementById('drawstate'); 
console.log('picture:'+picture+'.'); 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
if((picture=="")||(picture==null)){ 
    picture = "" 
    localStorage.setItem("picture", picture); 
    drawstate.innerHTML='picture empty'; 
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); 
    console.log('cleared'); 
}else{ 
    console.log(picture); 
    saved = picture.split('//'); 
    for(var i=1;i<saved.length;i++){ 
     eval(saved[i]); 
    } 
    drawstate.innerHTML='picture restored'; 
} 
} 

したがって、ローテーションの作成：

function turn(angle){ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    console.log('saved'); 
    ctx.rotate(angle); 
    console.log('rotated by'+angle); 
    ctx.restore(); 
    console.log('restored'); 
    save("//Turn('"+angle+"')"); 
    return false; 
} 

これは、回転やその他の変換には何の影響も与えません。図面はOKです。 助けてください。

おかげ Pifon

PS：このプログラムは次のとおりです。http://www.pifon.com/3d/回転は矢印右プレスで動作するはずです。

全スクリプト：http://www.pifon.com/3d/js/index.js

Answer 1

明らかに動作し始めます。 ターン機能が修正されました。

function turn(angle){ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(angle*(Math.PI/180)); 
    ctx.translate(-canvas.width/2,-canvas.height/2); 
    inform('turn executed (by: '+angle+' degrees)'); 
    drawSaved(); 
    return false; 
} 

ありがとうございました。

パイソン

Answer 2

あなたはあなたの元のソースでTurn(angle)という名前の2つの機能を持っています。