旋转全窗口画布答案

【问题标题】：Rotating full window canvas旋转全窗口画布
【发布时间】：2012-02-09 13:51:12
【问题描述】：

我正在做一个简单的（目前）应用程序来在画布上绘图。我可以绘制简单的形状，例如放置点、正方形、线条，但是当我尝试旋转整个图像时 - 没有任何反应。没有错误，没有旋转。请告知问题出在哪里。

画布通过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;
}

所有这些都不会影响旋转 - 或任何其他转换。画画还行。请帮忙。

谢谢派丰

PS：这个程序是：http://www.pifon.com/3d/ 旋转应该在箭头右按时起作用。

完整脚本：http://www.pifon.com/3d/js/index.js

【问题讨论】：

标签： html canvas rotation draw

【解决方案1】：

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

【讨论】：

【解决方案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;
}

感谢您的帮助。

琵琶

【讨论】：