Comment utiliser le canevas HTML5 pour obtenir un mouvement uniforme-js tutoriel-php.cn

Comment utiliser le canevas HTML5 pour obtenir un mouvement uniforme

一个新手

Libérer： 2017-10-09 10:19:35

original

2049 Les gens l'ont consulté

Mouvement uniforme : fait référence à un objet se déplaçant en ligne droite et le déplacement de l'objet dans tout intervalle de temps égal est égal. En fait, il s’agit d’un mouvement linéaire uniforme. Sa caractéristique est que l’accélération est nulle. D’après la définition, on peut voir que dans tout intervalle de temps égal, l’amplitude et la direction de la vitesse sont les mêmes.

<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>

Copier après la connexion

L'exemple ci-dessus permet à une petite boule d'un rayon de 20 px de se déplacer uniformément vers la droite à une vitesse de 2 px par image à partir de x=0, y= la moitié de la hauteur de la toile

On peut encapsuler la balle dans un objet :

fichier ball.js :

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();
    }
}

Copier après la connexion

La position. de cet objet boule peut être personnalisé Rayon et couleur, prend en charge deux méthodes de rendu (trait et remplissage)

<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>

Copier après la connexion

Mouvement de barre oblique uniforme :

<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>

Copier après la connexion

Mouvement uniforme dans n'importe quelle direction (décomposition de la vitesse)

<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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!