Boas
Estou a criar um canvas auxiliar para fazer um clip de uma imagem, e se criar esse canvas auxiliar só uma vez, o programa começa a ficar super lento.. mudei a "criação" do canvas para a function onde o vou usar e ficou mais rapido (no meu projecto mesmo assim ainda tem lag)...
Código (Javascript):
qual o motivo?
Obrigado desde já!
Estou a criar um canvas auxiliar para fazer um clip de uma imagem, e se criar esse canvas auxiliar só uma vez, o programa começa a ficar super lento.. mudei a "criação" do canvas para a function onde o vou usar e ficou mais rapido (no meu projecto mesmo assim ainda tem lag)...
Código (Javascript):
window.onload = function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = "http://s24.postimg.org/4szaj728x/test.png";
//var canvasAux = null;
//var contextAux = null;
var lastLoop = new Date;
var xVel = 1;
function initCanvasAux() {
canvasAux = document.createElement('canvas');
canvasAux.width = myImage.width;
canvasAux.height = myImage.height;
contextAux = canvasAux.getContext('2d');
}
function drawTile(x, y, index) {
// agora crio o canvas auxiliar a cada frame
var canvasAux = document.createElement('canvas');
canvasAux.width = myImage.width;
canvasAux.height = myImage.height;
var contextAux = canvasAux.getContext('2d');
contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
contextAux.save();
contextAux.translate(myImage.width / 2, 0);
contextAux.moveTo(0, 0);
contextAux.lineTo(myImage.width / 2, myImage.height / 2);
contextAux.lineTo(0, myImage.height);
contextAux.lineTo(-myImage.width / 2, myImage.height / 2);
contextAux.closePath();
contextAux.clip();
contextAux.imageSmoothingEnabled = false;
contextAux.drawImage(myImage, -myImage.width / 2, 0);
contextAux.restore();
context.save();
context.translate(x + index * myImage.width / 2, y + index * myImage.height / 2);
context.drawImage(canvasAux, -myImage.width / 2, 0);
context.restore();
}
function mainLoop() {
var thisLoop = new Date;
var fps = Math.round(1000 / (thisLoop - lastLoop));
lastLoop = thisLoop;
var x = 100 + xVel, y = 100;
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 10; i++) {
drawTile(x, y, i);
}
xVel++;
context.font = "12px Arial";
context.fillText("FPS: " + fps, 10, 20);
}
myImage.onload = function () {
//initCanvasAux();
setInterval(mainLoop, 33);
};
};
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = "http://s24.postimg.org/4szaj728x/test.png";
//var canvasAux = null;
//var contextAux = null;
var lastLoop = new Date;
var xVel = 1;
function initCanvasAux() {
canvasAux = document.createElement('canvas');
canvasAux.width = myImage.width;
canvasAux.height = myImage.height;
contextAux = canvasAux.getContext('2d');
}
function drawTile(x, y, index) {
// agora crio o canvas auxiliar a cada frame
var canvasAux = document.createElement('canvas');
canvasAux.width = myImage.width;
canvasAux.height = myImage.height;
var contextAux = canvasAux.getContext('2d');
contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
contextAux.save();
contextAux.translate(myImage.width / 2, 0);
contextAux.moveTo(0, 0);
contextAux.lineTo(myImage.width / 2, myImage.height / 2);
contextAux.lineTo(0, myImage.height);
contextAux.lineTo(-myImage.width / 2, myImage.height / 2);
contextAux.closePath();
contextAux.clip();
contextAux.imageSmoothingEnabled = false;
contextAux.drawImage(myImage, -myImage.width / 2, 0);
contextAux.restore();
context.save();
context.translate(x + index * myImage.width / 2, y + index * myImage.height / 2);
context.drawImage(canvasAux, -myImage.width / 2, 0);
context.restore();
}
function mainLoop() {
var thisLoop = new Date;
var fps = Math.round(1000 / (thisLoop - lastLoop));
lastLoop = thisLoop;
var x = 100 + xVel, y = 100;
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 10; i++) {
drawTile(x, y, i);
}
xVel++;
context.font = "12px Arial";
context.fillText("FPS: " + fps, 10, 20);
}
myImage.onload = function () {
//initCanvasAux();
setInterval(mainLoop, 33);
};
};
qual o motivo?
Obrigado desde já!