Canvas draws a moving ball

First, how about animation in canvas? In fact, the animation in canvas is realized by constantly redrawing, For example, a ball is initially marked as ball(X,Y) on the X and Y positions of the canvas, then changes the ball’s X and Y coordinates to Ball (X +5, Y +5) every 10 milliseconds (plus 5 pixels at the current X and Y coordinates) and clears the entire canvas. After redrawing the ball on the canvas, since 10 milliseconds is very short, All it gives us visually is that the ball is in constant motion. This is basically how canvas drawing works.

1. Defining a ball object

   Var ball = {xPointer: 100, // yPointer: 100, // yPointer: 100, // vx: 1, // vy: 0.1, //y: x: 1, // X-axis movement direction (1 represents positive direction, -1 represents negative direction) y: -1, // Y-axis movement direction color: "blue", // ball color radius: 10, // small ball radius};Copy the code

2. There are many balls in the demo, so define an array to hold these balls. The balls have different starting coordinates, color, and direction of motion, so these values need to be randomly obtained.

   var ballList = []; Var canvas, CTX; Function initBall() {canvas= document.getelementById ("canvas"); ctx=canvas.getContext("2d"); For (var I = 0; i < 60; i++) { // console.log(getIndex() + " " + getIndex()) var ball = {}; ball.xPointer = getRandom(20, 980); // Ball. YPointer = getRandom(20, 340); // Ball. X = getIndex(); Ball. Y = getIndex(); // Ball. Vx = math.random (); // Ball. Vy = math.random (); // Random ball y direction velocity ball. Radius = 9; Small / / the sphere ball. Color = "#" + (" 00000 "+ ((Math) random () * 16777215 + 0.5) > > 0). ToString (16)). The slice (6); // Random ball color balllist.push (ball); Function getIndex() {var arr = [0, 1]; var index = Math.floor((Math.random() * arr.length)); if (index == 0) { index = -1; } return index; } function getRandom(first, last) {var choice = last-first + 1; return Math.floor(Math.random() * choice + first); }Copy the code

3. Draw the canvas tag of the ball page through the Canvas

   <canvas id="canvas" width="1000" height="360" style='background-color: #EEEEEE; '></canvas>Copy the code

   Canvas draws ball code

   function draw(ctx) { ctx.clearRect(0, 0, 1000, 360); For (var I = 0; i < ballList.length; i++) { ctx.save(); ctx.beginPath(); ctx.fillStyle = ballList[i].color; ctx.arc(ballList[i].xPointer, ballList[i].yPointer, ballList[i].radius, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); ctx.restore(); }}Copy the code

4. The ball moves using simple collision detection, changing its direction each time it reaches the edge of the canvas

   Function update(ballList, CTX) {for (var I = 0; i < ballList.length; i++) { ballList[i].xPointer += ballList[i].vx * ballList[i].x; ballList[i].yPointer += ballList[i].vy * ballList[i].y; / / collision detection if the X axis direction (ballList [I] xPointer + ballList [I] the radius > = canvas. Width | | ballList [I] xPointer - ballList [I] the radius <= 0) { ballList[i].x = ballList[i].x * -1; } / / collision detection Y direction if (ballList [I] yPointer + ballList [I] the radius > = canvas. Height | | ballList [I] yPointer - ballList[i].radius <= 0) { ballList[i].y = ballList[i].y * -1; }}}Copy the code

5. Draw the lines between balls

   Function drawLine(ballList, CTX) {for (var I = 0; i < ballList.length; i++) { for (var j = 0; j < ballList.length; j++) { var xx = Math.pow((ballList[i].xPointer - ballList[j].xPointer), 2); var yy = Math.pow((ballList[i].yPointer - ballList[j].yPointer), 2); var zz = Math.sqrt(xx + yy); If (zz <= 100&&zz>=20) {console.log(zz) ctx.save(); ctx.beginPath(); ctx.strokeStyle="#999999"; CTX. Our lineWidth = 0.1; / / CTX. StrokeStyle = "#" + (" 00000 "+ ((Math) random () * 16777215 + 0.5) > > 0). ToString (16)). The slice (6); ctx.moveTo(ballList[i].xPointer, ballList[i].yPointer); ctx.lineTo(ballList[j].xPointer,ballList[j].yPointer); ctx.closePath(); ctx.stroke(); ctx.restore(); }}}}Copy the code

6. run

   (function(){ initBall(); SetInterval (function() {// console.log(selectFrom (0, 600) + "" + selectfrom(0, 600)); draw(ctx); // Draw update(ballList, CTX); DrawLine (ballList, CTX); }, 24)})();Copy the code

other#

• Because the code is relatively simple and small, there is no encapsulation process

• By modifying the radius of the ball, we get another nice display, as shown below

The effect of changing the radius of the small ball

To this a canvas ball movement effect demo finished, looking at whether there is a 3D transformation effect.

Reference documentation#

Canvas reference document Canvas API

If this article is wrong, please feel free to comment!

Canvas draws a moving ball

The original link: www.mengxiangjia.info/2016/01/05/…

Copyright statement: free reproduced signature – not commercial – not derivative – keep | Creative Commons BY – NC – ND 3.0