The following code shows simple animation as drawing, erasing, and redrawing figures on the canvas while their coordinates change between two drawings. Animation is really that simple.
The code utilizes a custom made canvas object as well
as an Umo object. Unidentified Moving Object.
We shall cover a UX aspect, and look at the way coordinates are
calculated using simple high school math.
The Canvas generalization you have seen before. We repeat here for ease of reference
import {$} from './nQuery.js';
/**
* Canvas object
*/
export class Canvas {
constructor(canvasId, color) {
this.canvas = $(canvasId);
this.context = this.canvas.getContext("2d");
this.color = color;
this.prep();
}
prep() {
this.context.fillStyle = this.color;
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
getContext() {
return this.context;
}
getHeight() {
return this.canvas.height;
}
getWidth() {
return this.canvas.width;
}
};nmlUmo0.js
'use strict';
/**
* Umo object, version 0.9.1
*/
export class Umo {
constructor(canvas, color) {
this.canvas = canvas;
this.r = Math.random() * 9 + 3;
this.x = Math.random() * (this.canvas.getWidth() - this.r - 2);
this.y = Math.random() * (this.canvas.getHeight() - this.r - 2);
this.dx = Math.random() * 3;
this.dy = Math.random() * 3;
this.color = color;
}
draw() {
this.canvas.getContext().beginPath();
this.canvas.getContext().strokeStyle = '#222';
this.canvas.getContext().fillStyle = this.color;
this.canvas.getContext().arc(this.x, this.y, this.r,
0, Math.PI * 2,
false);
this.canvas.getContext().fill();
this.canvas.getContext().stroke();
this.canvas.getContext().closePath();
}
move() {
if (this.x + this.dx + this.r > this.canvas.getWidth()
|| this.x + this.dx - this.r < 0)
this.dx = -this.dx;
if (this.y + this.dy + this.r > this.canvas.getHeight()
|| this.y + this.dy - this.r < 0)
this.dy = -this.dy;
this.x += this.dx;
this.y += this.dy;
}
toString() {
s = '';
s += this.x + ':' + this.y + ', ' + this.r + " \n " + this.color;
return s;
}
};
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Test Animation</title>
<script type='module' src='animate00.js'></script>
<script>
</script>
</head>
<body>
<section>
<canvas id='canvas' width='400' height='300'>
If you see this text, your browser is very old.
</canvas>
</section>
</body>
</html>
Before we look at the animated object as code, let us see it live: Click here!