Shulou(Shulou.com)06/01 Report--

This article Xiaobian introduces in detail for you "how to use Canvas to set up the mouse mobile display standard dazzling color ball in html", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use Canvas setting to follow the mouse mobile display standard dazzling color ball in html" article can help you solve your doubts.

Realization principle

Create a small ball

Add random color and random radius to the ball

Add a small ball by instantiating the mouse

The animation effect of the ball is realized by calling the method added to the prototype.

Constantly update the canvas through a timer

Implement the process to create a ball

By creating a function to accept all the styles of the ball, and then by instantiating the function, the current position of the mouse is passed to the Ball function, so that the created ball is instantiated, and finally the created ball is stored in an array, where the attributes and attribute values of each ball are stored in the form of an object.

Function Ball (x, y, r) {this.x = x; this.y = y; this.r = r; this.color = getRandom (); / / randomly generated color this.dx = parseInt (Math.random () * 10)-5 this.dy / generate random movement position this.dy = parseInt (Math.random () * 10)-5 this.dy / `- 5` is to enable the ball to move randomly around ballArr.push (this) / / add a ball} / / listen to the mouse movement event canvas.addEventListener ('mousemove', function (e) {new Ball (e.offsetX, e.offsetY, parseInt (Math.random () * 20)); / * instantiate Ball to Ball object and call the prototype method through _ _ proto__ * /}) to generate random colors

For the color attribute, a color can be represented by a 6-bit hexadecimal value

Therefore, it can be used as a random color by randomly generating a 6-bit hexadecimal number.

The 16 numbers from 0 to f are stored in the array, and by randomly generating 6 index values from 0 to 16, the numbers from 0 to f can be randomly obtained from the index number of the array.

The function of split is to split the string with the parameters in parentheses as markers and return the array.

/ / set random colors function getRandom () {var allType = '0pence 1, for 2; for (var I = 0; I < 6) Var random = parseInt (Math.random () * allTypeArr.length); color + = allTypeArr [random];} return color;// returns the randomly generated color} render ball

Add render methods to the prototype chain of the function, so that every object instantiated by the Ball function has these methods

The function of this function is to generate a circle through the parameters of Ball, and when it is instantiated, it will generate an object in which these values are stored.

Ball.prototype.render = function () {ctx.beginPath (); / / path start ctx.arc (this.x, this.y, this.r, 0, Math.PI * 2, false); / / draw circle, position, radius ctx.fillStyle = this.color;// color ctx.fill (); / / fill} update ball information

Because the resulting ball is fixed, the position of the ball is also fixed and will not be changed.

Therefore, it is necessary to change the position and radius of each ball to make the ball move. When the radius of the ball is less than 0, call the remove method to delete the ball from the array.

/ * clear when updating ball position and radius less than 0 * / Ball.prototype.update = function () {this.x + = this.dx;//x change this.y + = this.dy;//y change this.r-= 0.1 lead / radius decrease if (this.r < 0) {this.remove (); / / call the added remove method}} delete the ball

This is the remove method called above. When this, that is, when the radius of the current ball is less than 0, traverse the entire array, find the this, that is, "the ball", and delete this element of the array by calling the method in the array.

The splice (index,num) method deletes num elements starting at index

Ball.prototype.remove = function () {for (var I = 0; I < ballArr.length; iTunes +) {if (ballArr [I] = = this) {ballArr.splice (I, 1); / / find this element less than 0, delete} render the canvas

Through the timer, constantly update the canvas, mainly these steps

Clear the canvas

Traverse the array, get the information of all the balls, and render it to the canvas

Keep calling repeatedly to update the ball information

SetInterval (function () {ctx.clearRect (0,0, canvas.width, canvas.height); / / clear screen for (var I = 0; I < ballArr +) {ballArr [I] .update (); / / update if (ballArr [I]) {ballArr [I] .render (); / / render}}, 20)

Complete code:

Document body {background: black;} canvas {display: block; border: 1px solid black; margin: 0 auto;} the current browser version is not supported. Please upgrade the browser var canvas = document.getElementById ('myCanvas'); var ctx = canvas.getContext (' 2d') / / define the position and radius of the ball function Ball (x, y, r) {this.x = x; this.y = y; this.r = r; this.color = getRandom (); / / randomly generated color this.dx = parseInt (Math.random () * 10)-5 / / generate randomly moving position this.dy = parseInt (Math.random () * 10)-5; ballArr.push (this); / / add ball} / * update ball position and radius less than 0 clear * / Ball.prototype.update = function () {this.x + = this.dx; this.y + = this.dy This.r-= 0.1; if (this.r < 0) {this.remove (); / / call the added remove method}} Ball.prototype.remove = function () {for (var I = 0; I < ballArr.length) ) {if (ballArr [I] = = this) {ballArr.splice (I, 1) / / find the element less than 0, delete} / / render the ball / / add the method Ball.prototype.render = function () {ctx.beginPath () in the prototype; / / path start ctx.arc (this.x, this.y, this.r, 0, Math.PI * 2, false) / / draw circle, position, radius ctx.fillStyle = this.color;// color ctx.fill ();} / / listen for mouse movement event canvas.addEventListener ('mousemove', function (e) {new Ball (e.offsetX, e.offsetY, parseInt (Math.random () * 20) / / instantiate Ball to Ball object to call the prototype method console.log (ballArr) via _ _ proto__;}) var ballArr = []; setInterval (function () {ctx.clearRect (0,0, canvas.width, canvas.height); / / clear screen for (var I = 0; I < ballArr.length) If +) {ballArr [I] .update (); / / update ball if (ballArr [I]) {ballArr [I] .render (); / / render ball}, 20) / / set random colors function getRandom () {var allType = '0pence 1, for 2; for (var I = 0; I < 6) Var random +) {var random = parseInt (Math.random () * allTypeArr.length); / / randomly generate a number color + = allTypeArr [random];} return color / / return the randomly generated color} read here, this article "how to use Canvas settings in html to follow the mouse mobile display standard dazzling color ball" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.