0
나는 게임을 만들고 있는데, 프레임마다 이미지를 회전하는 대신 캐시 된 캔버스를 사용하고 싶습니다. 나에게 의미있는 이미지를 추가하는 기능을 만들었지 만 캔버스 객체를 더 이상 사용할 수 없다는 오류 메시지가 프레임마다 표시됩니다.캔버스에서 회전 및 캐싱 버그
INVALID_STATE_ERR : DOM 예외 11 : 시도는하지 않습니다, 또는 더 이상 사용할 수있는 객체를 사용하려고했습니다.
또한 object.set()을 사용하고 있음을 알아야 할 수도 있습니다. 그 이미지를 renderArray에 추가하십시오. 이는 캔버스 객체가 여전히 사용 가능한지 여부에 영향을 미칠 수 있습니까?
var game = {
render:function(){
//gets called every frame
context.clearRect(0, 0, canvas.width, canvas.height);
for(i = 0; i < game.renderArray.length; i++){
switch(game.renderArray[i].type){
case "image":
context.save();
context.translate(game.renderArray[i].x, game.renderArray[i].y);
context.rotate(Math.PI*game.renderArray[i].rotation/180);
context.translate(-game.renderArray[i].x, -game.renderArray[i].y);
context.drawImage(game.renderArray[i].image, game.renderArray[i].x, game.renderArray[i].y);
context.restore();
break;
}
if(game.renderArray[i].remove == true){
game.renderArray.splice(i,1);
if(i > 1){
i--;
}else{
break;
}
}
}
},
size:function(width, height){
canvas.height = height;
canvas.width = width;
return height + "," + width;
},
renderArray:new Array(),
//initialize the renderArray
image:function(src, angle){
if(angle != undefined){
//if the argument 'angle' was given
this.tmp = new Image();
this.tmp.src = src;
//sets 'this.image' (peach.image) to the canvas. It then should get rendered in the next frame, but apparently it doesn't work...
this.image = rotateAndCache(this.tmp, angle);
}else{
this.image = new Image();
this.image.src = src;
}
this.x = 0;
this.y = 0;
this.rotation = 0;
this.destroy = function(){
this.remove = true;
return "destroyed";
};
this.remove = false;
this.type = "image";
this.set = function(){
game.renderArray.push(this);
}
}
};
var canvas, context, peach;
$(document).ready(function(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
//make the variable peach a new game.image with src of meme.jpg and an angle of 20.
peach = new game.image('meme.jpg', 20);
peach.set();
game.size(700,500);
animLoop();
});
: 여기
rotateAndCache = function(image, angle){
var offscreenCanvas = document.createElement('canvas');
var offscreenCtx = offscreenCanvas.getContext('2d');
var size = Math.max(image.width, image.height);
offscreenCanvas.width = size;
offscreenCanvas.height = size;
offscreenCtx.translate(size/2, size/2);
offscreenCtx.rotate(angle + Math.PI/2);
offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));
return offscreenCanvas;
}
그리고 좀 더 마크 업 코드는 다음과 같습니다
는 캐시 된 캔버스를 반환하는 기능, (D 나는이 웹 사이트의 게시물에서했다)입니다 원하는 경우 여기에 내 사이트에서 호스팅되는이 프로젝트입니다 : http://keirp.com/zap