Change site style→

style-1 style-2
  1. nazenani
  2. >
  3. CANVAS
  4. >
  5. Basic image using strokeRect.

Basic image using strokeRect.

Using strokeRect.

Static image.

See the Pen 【Basic】Squares by Aoi Himeno (@AoiHimeno) on CodePen.

Animation

See the Pen 【Basic】Squares(advanced) by Aoi Himeno (@AoiHimeno) on CodePen.

too fast….

Notice

Coodinate system

To set coordinate system, add attributions “width”, “height” with canvas tag.

<canvas width="400" height="300"></canvas>

Coordinate system is decided by each browser. So if you will change it, rewrite it by add attributions.

basis of animation

The points are “requestAnimFrame” and “loop”

“requestAnimFrame” optimize multiple animation motion and does not loop not needing. Feathermore, animation using it is light.

“loop” is important to loop motionsof images.

Comment

Fields with * is required.

Go to related tags archive?