Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

criar canvas a cada frame é mais rapido?

$
0
0
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):
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);
                    };
            };


qual o motivo?

Obrigado desde já!

Viewing all articles
Browse latest Browse all 14700