How to use html5 canvas to achieve uniform motion-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use html5 canvas to achieve uniform motion

一个新手

Oct 09, 2017 am 10:19 AM

canvas h5 html5

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.

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                x = 0;
            function drawBall( x, y, cxt ){
                cxt.fillStyle = &#39;#09f&#39;;
                cxt.beginPath();
                cxt.arc( x, y, 20, 0, 2 * Math.PI );
                cxt.closePath();
                cxt.fill();
            }
            ( function linear(){
                oGc.clearRect( 0, 0, width, height );
                drawBall( x, height / 2, oGc );
                x += 2;
                console.log( x );
                requestAnimationFrame( linear );
            } )();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

Copy after login

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 || &#39;#09f&#39;;
}
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();
    }
}

Copy after login

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

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, height / 2 );
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += 2;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>

<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

Copy after login

Uniform slash movement:

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, height );
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += 2;
                ball.y -= 1;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>

<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

Copy after login

Uniform motion in any direction (velocity decomposition)

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script src="./ball.js"></script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                ball = new Ball( 0, 0 ),
                speed = 5,
                vx = speed * Math.cos( 10 * Math.PI / 180 ),
                vy = speed * Math.sin( 10 * Math.PI / 180 );
                
            (function linear() {
                oGc.clearRect(0, 0, width, height);
                ball.fill( oGc );
                ball.x += vx;
                ball.y += vy;
                requestAnimationFrame(linear);
            })();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
</body>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn