问题描述:

everyone:

I have a question about the animation in HTML5 canvas,

Here's two animations code in different canvases : http://jsfiddle.net/lk11260/g9pqfozs/

Can I integrate these two animations together?!

Because, when I did that, there's something went wrong. Following code is the integrated code I've done.

My demand is that I want the canvas' rectangle moves from upper left to lower right in canvas. And the canvas2's rectangle moves in horizontal and let the canvas keeps the black line which the rectangle had run through in looping clearRect() mode.

but when I did that, only first canvas works right, but canvas2's rectangle doesn't keeps it's black line of the passed orbit.

Did I ignore something important at the animation process?

or Does the animation process has different rendering concepts when we integrate the OOP code in canvas?

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var request1 = window.webkitRequestAnimationFrame;

var step = 1;

function init() {

function obj() {

this.x = 0; this.y = 0;

this.update = function() {

this.x = this.x + step;

this.y = this.y + step;

}

this.render = function() {

context.beginPath();

context.rect(this.x, this.y, 10, 10);

context.fillStyle = '#000000';

context.fill();

}

}

var ar = new Array(2);

for(var i = 0; i< ar.length ;i++ ){

ar[i] = new obj();

}

var x=0;

function draw1(){

context.clearRect(0, 0, 200, 200);

for(var i = 0; i< ar.length ;i++ ){

ar[i].update();

ar[i].render();

}

//=======code in canvas2========

context.save();

context.rect(x, 50, 10, 10);

context.fillStyle = "#000";

context.fill();

context.restore();

x++;

//==============================

request1(draw1);

}

request1(draw1);

}

init();

#canvas {

position: absolute;

top: 0px;

left: 0px;

background-color:#ccc;

}

<canvas width='200px' height='200px' id='canvas'></canvas>

相关阅读:
Top