Canvas Animation Kit Experiment ...... how to clean the canvas?

Question

I can get obj to use the canvas to paint like this:

MyObj.myDiv = new Canvas($("effectDiv"), Setting.width, Setting.height); 

Then I use it to draw a rectangle on the canvas:

  var c = new Rectangle(80, 80, { fill: [220, 40, 90] } ); var move = new Timeline; move.addKeyframe(0, { x: 0, y: 0 } ); c.addTimeline(move); MyObj.myDiv.append(c); 

But after drawing the rectangle I want to clear the canvas, but I do not know what method and how to do it ......

O ... one more thing: a website CAKE: Link

Answer 1

Canvas cleaning:

 canvas.clear = true; // makes the canvas clear itself on every frame canvas.fill = somecolor; // fills the canvas with some color on every frame // with canvas.clear = false and low-opacity fill, fancy motion blur effect Removing the rectangle from the canvas: rectangle.removeSelf(); or canvas.removeChild(rectangle); opacity fill, fancy motion blur effect canvas.clear = true; // makes the canvas clear itself on every frame canvas.fill = somecolor; // fills the canvas with some color on every frame // with canvas.clear = false and low-opacity fill, fancy motion blur effect Removing the rectangle from the canvas: rectangle.removeSelf(); or canvas.removeChild(rectangle); 

Answer 2

You can try this method:

 MyObj.myDiv.clearRect(0, 0, canvas.width, canvas.height); 

Effectively stain the entire canvas in the background color.

Answer 3

The easiest way:

 MyObj.myDiv.width = MyObj.myDiv.width; 

Answer 4

I've found that the change in size of the canvas works like magic, even if you do not change the size:

 canvas.width = canvas.width