[Js master path] html5 canvas animation tutorial,
Note: If the Code following this article loads ball. js, use this article [js master path] html5 canvas animation tutorial-ball. js code for constant speed motion.
Boundary rebound:
When the ball hits the four directions of the canvas, the position remains unchanged and the speed changes to the opposite direction.
1The principle is similar to the previous article [the path to js masters] html5 canvas animation tutorial-boundary judgment is similar to the simulated fountain of small ball particles, but when it hits the boundary, when the speed is reversed, the ball will rebound.
<Head> <meta charset = 'utf-8'/> <style >#canvas {border: 1px dashed # aaa ;}</style> <script> 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 () ;}</script> <script> window. onload = function () {var oCanvas = document. querySelector ("# canvas"), oGc = oCanvas. getContext ('2d '), width = oCanvas. width, height = oCanvas. height, ball = new Ball (width/2, height/2), vx = Math. random () * 2 + 5, vy = Math. random () * 2 + 5; ball. fill (oGc); (function move () {oGc. clearRect (0, 0, width, height); ball. x + = vx; ball. y + = vy; ball. fill (oGc); if (ball. x <ball. radius) {// hit the left-side boundary ball. x = ball. radius; vx =-vx;} else if (ball. y <ball. radius) {ball. y = ball. radius; vy =-vy;} else if (ball. x> width-ball. radius) {ball. x = width-ball. radius; vx =-vx;} else if (ball. y> height-ball. radius) {ball. y = height-ball. radius; vy =-vy;} requestAnimationFrame (move );})();} </script> </pead> <body> <canvas id = "canvas" width = "1200" height = "600"> </canvas> </body>
Run codeBounce of multiple objects
1The principle is the same. It only determines the coordinates and speed based on small ball objects.
<Head> <meta charset = 'utf-8'/> <style >#canvas {border: 1px dashed # aaa ;}</style> <script> 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 () ;}</script> <script> window. onload = function () {var oCanvas = document. querySelector ("# canvas"), oGc = oCanvas. getContext ('2d '), width = oCanvas. width, height = oCanvas. height, bils = [], n = 50; function getRandColor () {return' # '+ (Function (color) {return (color + = '0123456789abcdef' [Math. floor (Math. random () * 16)]) & (color. length = 6 )? Color: arguments. callee (color) ;}) ('') ;}for (var I = 0; I <n; I ++) {var ball = new Ball (width/2, height/2, 20, getRandColor (); ball. vx = (Math. random () * 2-1) * 5; ball. vy = (Math. random () * 2-1) * 5; bils. push (ball);} (function move () {oGc. clearRect (0, 0, width, height); bils. forEach (function (ball) {ball. x + = ball. vx; ball. y + = ball. vy; ball. fill (oGc); if (ball. x <ball. radius) {// hit the left-side boundary ball. x = ball. radius; ball. vx =-ball. vx;} else if (ball. y <ball. radius) {ball. y = ball. radius; ball. vy =-ball. vy;} else if (ball. x> width-ball. radius) {ball. x = width-ball. radius; ball. vx =-ball. vx;} else if (ball. y> height-ball. radius) {ball. y = height-ball. radius; ball. vy =-ball. vy ;}}); requestAnimationFrame (move );})();} </script> </pead> <body> <canvas id = "canvas" width = "1200" height = "600"> </canvas> </body>
Run code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
