How to use html5 canvas to achieve uniform motion

Uniform motion: refers to an object moving in a straight line, and the displacement of the object in any equal time interval is equal. In fact, it is uniform linear motion. Its characteristic is that the acceleration is 0. From the definition, it can be seen that within any equal time interval, the speed magnitude and direction are the same.

The above example allows a small ball with a radius of 20px to move uniformly to the right at a speed of 2px per frame from x=0, y=half the height of the canvas.

We can encapsulate the ball into an object:

ball.js file:

function Ball( x, y, r, color ){
    this.x = x || 0;
    this.y = y || 0;
    this.radius = r || 20;
    this.color = color || '#09f';
}
Ball.prototype = {
    constructor : Ball,
    stroke : function( cxt ){
        cxt.strokeStyle = this.color;
        cxt.beginPath();
        cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
        cxt.closePath();
        cxt.stroke();
    },
    fill : function( cxt ){
        cxt.fillStyle = this.color;
        cxt.beginPath();
        cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
        cxt.closePath();
        cxt.fill();
    }
}

The ball object can customize the position radius and color. Supports two rendering methods (stroke and fill)

Uniform slash movement:

Uniform motion in any direction (velocity decomposition)

The above is the detailed content of How to use html5 canvas to achieve uniform motion. For more information, please follow other related articles on the PHP Chinese website!