Uniform motion: Refers to the movement of an object in a straight line, and the displacement of an object through any equal time interval is equal. In fact, it is uniform motion, it is characterized by an acceleration of 0, from the definition, in any equal time interval, the speed and direction are the same.
12<meta charset= ' Utf-8 '/>3<style>4 #canvas {5 border:1px dashed #aaa;6 }7</style>8<script>9Window.onload =function () {Ten varOcanvas = Document.queryselector ("#canvas"), OneOGc = Ocanvas.getcontext (' 2d '), Awidth = ocanvas.width, height =Ocanvas.height, -x = 0; - functiondrawball (x, y, cxt) { theCxt.fillstyle = ' #09f '; - Cxt.beginpath (); -Cxt.arc (x, y, 20, 0, 2 *Math.PI); - Cxt.closepath (); + Cxt.fill (); - } +(functionlinear () { AOgc.clearrect (0, 0, width, height); atDrawball (x, HEIGHT/2, oGc); -X + = 2; - Console.log (x); - requestanimationframe (linear); - } )(); - } in</script> - to<body> +<canvas id= "Canvas" width= "height=" ></canvas> -</body>
The above example lets a small ball with a radius of 20px from x=0, y=canvas the height of half, at 2px per frame speed to the right uniform motion.
We can encapsulate the ball into an object:
Ball.js file:
1 functionBall (x, y, R, color) {2 This. x = x | | 0;3 This. y = y | | 0;4 This. Radius = R | | 20;5 This. color = Color | | ' #09f ';6 }7Ball.prototype = {8 Constructor:ball,9Stroke:function(CXT) {TenCxt.strokestyle = This. Color; One Cxt.beginpath (); ACxt.arc ( This. x, This. Y, This. Radius, 0, 2 *Math.PI); - Cxt.closepath (); - Cxt.stroke (); the }, -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 (); A } at}
The ball object, can be customized position radius and color, support two rendering methods (stroke and fill)
12<meta charset= ' Utf-8 '/>3<style>4 #canvas {5 border:1px dashed #aaa;6 }7</style>8<script src= "./ball.js" ></script>9<script>TenWindow.onload =function () { One varOcanvas = Document.queryselector ("#canvas"), AOGc = Ocanvas.getcontext (' 2d '), -width = ocanvas.width, height =Ocanvas.height, -Ball =NewBall (0, HEIGHT/2 ); the(functionlinear () { -Ogc.clearrect (0, 0, width, height); - Ball.fill (oGc); -Ball.x + = 2; + requestanimationframe (linear); - })(); + } A</script> at - -<body> -<canvas id= "Canvas" width= "height=" ></canvas> -</body>
Slash Uniform motion:
12<meta charset= ' Utf-8 '/>3<style>4 #canvas {5 border:1px dashed #aaa;6 }7</style>8<script src= "./ball.js" ></script>9<script>TenWindow.onload =function () { One varOcanvas = Document.queryselector ("#canvas"), AOGc = Ocanvas.getcontext (' 2d '), -width = ocanvas.width, height =Ocanvas.height, -Ball =NewBall (0, height); the(functionlinear () { -Ogc.clearrect (0, 0, width, height); - Ball.fill (oGc); -Ball.x + = 2; +BALL.Y-= 1; - requestanimationframe (linear); + })(); A } at</script> - - -<body> -<canvas id= "Canvas" width= "height=" ></canvas> -</body>
[JS Master's road] HTML5 Canvas Animation tutorial-Uniform motion