JavaScript canvas implements moving the ball following the mouse

This article example shares the specific code of js following the mouse to move the ball for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 canvas{
 border: 1px solid #000;
 }
 </style>
 </head>
 <body>
 <canvas id="mycanvas" width="1500" height="800"></canvas>
 <script>
 // Create a canvas var canvas = document.getElementById('mycanvas');
 var ctx = canvas.getContext('2d');
 // Ball class function Ball(x, y) {
 this.x = x;
 this.y = y;
 // Initial radius this.r = parseInt(Math.random() * 50) + 10;
 this.step = parseInt(Math.random() * 5) + 0.1;
 // Set random color this.color = getRandom();
 // Set random direction this.dx = parseInt(Math.random() * 10) - 5;
 this.dy = parseInt(Math.random() * 10) - 5;
 // Load the object into the array ballArr.push(this);
 }
 // Remove the object from the array Ball.prototype.remove = function() {
 for (var i = 0; i < ballArr.length; i++) {
 if (ballArr[i] == this) {
 ballArr.splice(i, 1);
 }
 }
 }
 // Update data Ball.prototype.update = function() {
 // Update data this.x += this.dx;
 this.y += this.dy;
 this.r -= this.step;
 // Clear the balls in the array if (this.r <= 0) {
 this.remove();
 }
 // If it exceeds the boundary, the ball continues to move if (this.x < 0) {
 this.x = 1500;
 this.color = getRandom();
 }
 else if (this.x > 1500) {
 this.x = 0;
 this.color = getRandom();
 }
 else if (this.y < 0) {
 this.y = 800;
 this.color = getRandom();
 }
 else if (this.y > 800) {
 this.y = 0;
 this.color = getRandom();
 }
 }
 // Render the ball Ball.prototype.render = function() {
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
 ctx.fillStyle = this.color;
 ctx.fill();
 }
 // canvas DOM2 event canvas.addEventListener("mousemove", function(event) {
 new Ball(event.offsetX, event.offsetY);
 });
 var ballArr = [];
 // Timer for animation rendering and update setInterval(function() {
 // Animation logic // Clear screen - update - render ctx.clearRect(0, 0, canvas.width, canvas.height);
 // Update and render the ball for (var i = 0; i < ballArr.length; i++) {
 ballArr[i].update();
 if (ballArr[i]) {
 ballArr[i].render();
 }
 }
 }, 30);
 // Random color function getRandom() {
 var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var allTypeArr = allType.split(",");
 var color = "#";
 // concatenate color strings for (var i = 0; i < 6; i++) {
 var random = parseInt(Math.random() * allTypeArr.length);
 color += allTypeArr[random];
 }
 return color;
 }
 </script>
 </body>
</html>

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: