旋转全窗口画布

Question

我正在做简单的（目前）应用程序在画布上绘图。 我可以绘制简单的形状，例如放置点、正方形、线条，但是当我尝试旋转整个图像时 - 什么也没有发生。没有错误，没有旋转。请指教哪里有问题。

画布通过函数 onwindowresize 更新为窗口大小：

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');
}

每个绘制函数将自身保存在本地存储中以进行重新绘制，例如放置点：

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 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< /a>

Answer 1

您的原始源代码中有两个名为 Turn(angle) 的函数。

Answer 2

显然它开始起作用了。
修正了转向功能。

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;
}

感谢您的帮助。

皮丰