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='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, x = 0; function drawBall( x, y, cxt ){ cxt.fillStyle = '#09f'; 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>
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 || '#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(); } }
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='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), 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>
Mouvement de barre oblique uniforme :
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), 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>
Mouvement uniforme dans n'importe quelle direction (décomposition de la vitesse)
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), 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>
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!