How to draw sports balls with JavaScript and Canvas

This article is about how to draw sports balls with JavaScript and Canvas. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Realization idea

First of all, in order to achieve the desired effect, we can first create a constructor.

Add corresponding properties and methods to the constructor.

Multiple objects are instantiated and saved in an array.

Traverse each object to draw a circle.

Modify the x, y values of each ball at intervals.

First prepare the canvas to determine the corresponding width and height:

Let canvas = document.getElementById ('canvas'); let ctx = canvas.getContext (' 2d'); let maxWidth = canvas.width, maxHeight = canvas.height; ctx.fillStyle ='# 000mm; ctx.fillRect (0,0, maxWidth, maxHeight)

Because it is a random motion, create a method to get a random number:

Function getRandomNum (minNum, maxNum) {switch (arguments.length) {case 1: return Math.round (Math.random () * minNum + minNum); break; case 2: return Math.round (Math.random () * (maxNum-minNum) + minNum); break; case 0: return 0; break }} / / create a Ball constructor function Ball (maxWidth, maxHeight, ctx) {this.ctx = ctx; this.maxWidth = maxWidth; this.maxHeight = maxHeight; / / Random Radius this.r = getRandomNum (5,15); / / Random x-ray coordinates this.x = getRandomNum (this.r, this.maxWidth-this.r) This.y = getRandomNum (this.r, this.maxHeight-this.r); / / Translation velocity, positive and negative interval is for multiple directions of movement this.speedX = getRandomNum (- 2,2); this.speedY = getRandomNum (- 2,2) / / Color random this.color = `rgba (${getRandomNum (0255)}, ${Math.random ()}) `;} Ball.prototype = {draw: function () {ctx.beginPath (); ctx.fillStyle = this.color Ctx.arc (this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill (); ctx.closePath ();}, move: function () {/ / determine the boundary value, so that the ball always keeps if (this.x > this.maxWidth-this.r) in the screen (this.x > this.maxWidth-this.r | | this.x).

< this.r) { this.speedX = -this.speedX; } if (this.y >

This.maxHeight-this.r | | this.y

< this.r) { this.speedY = -this.speedY; } this.x += this.speedX; this.y += this.speedY; } }; // 创建100个Ball实例 let balls = []; for (let i = 0; i < 100; i++) { let newBall = new Ball(maxWidth, maxHeight, ctx); newBall.draw(); balls.push(newBall); }2.静态效果 现在我们画出了不同半径和颜色的静止圆球：

Call the move method to modify the x, y values of each ball at intervals.

SetInterval (() = > {/ / clear the canvas ctx.clearRect (0,0, maxWidth, maxHeight); ctx.fillStyle ='# 000pieces; ctx.fillRect (0,0, maxWidth, maxHeight); for (let j = 0; j < 100; for +) {Balls.draw (ctx); let [j] .move ();}, 100) before each painting.

Effect display:

Thank you for reading! This is the end of this article on "how to draw sports balls with JavaScript and Canvas". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!