我正在做簡單的(現在)應用程序在畫布上繪製。 我可以繪製簡單的形狀,如放點,方塊,線條,但是當我嘗試旋轉整個圖像時 - 沒有任何反應。沒有錯誤,沒有旋轉。請告知問題在哪裏。旋轉的全窗口畫布
帆布由功能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');
}
每個繪製函數保存本身inlocalstorage重新繪製,例如放置點:
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;
}
所有這些都不會影響旋轉或任何其他轉換。繪圖是可以的。 請幫忙。
感謝 Pifon
PS:這個計劃是:http://www.pifon.com/3d/旋轉應向右箭頭按工作。
完整的腳本:http://www.pifon.com/3d/js/index.js
謝謝,糾正。但問題依然存在。 – Pifon 2012-02-09 04:41:12