!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ align-content: center; } </style> <title>Title</title> </head> <body> <canvas id="canvas">当前浏览器不支持该版本</canvas> <script src="js/underscore-min.js"></script> <script> const canvas = document.getElementById('canvas'); //创建一个画布 const ctx = canvas.getContext('2d'); //getContext() 方法返回一个对象,该对象提供了用于在画布上绘图的方法和属性 canvas.width = 1000; //定义画布尺寸 canvas.height = 800; canvas.style.backgroundColor = 'black'; //定义画布背景色 class Ball{ //创建小球类 constructor(x,y,color) { // this.r = 20; this.x = x; this.y = y; this.color = color; } draw() //球的绘制方法 { ctx.save(); //一般与restore方法成对出现,svae保存当前环境 ctx.beginPath(); //beginPath开始一条路径(之后开始绘制任务) ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); //定义图形 ctx.fillStyle = this.color; //填充图形的颜色 ctx.fill(); //绘制图形 ctx.restore(); //返回之前保存的环境 } } class moveBall extends Ball{ //moveBall类继承自Ball类 constructor(x,y,color) { super(x, y, color); //继承父类的构造方法 this.dX = _.random(-5, 5); //设置球移动的水平增量 this.dY = _.random(-5, 5); //垂直增量 this.dR = _.random(1, 3); //半径增量 } update(){ //每次执行更新一次增量操作 this.x += this.dX; this.y += this.dY; this.r -= this.dR; if (this.r < 0) { this.r = 0; } } } let ballArry = []; let colorArry = ['red','orange','yellow','green','blue','purple']; canvas.addEventListener("mousemove", function(e){ //画布添加监听器,每次的mousemove,都会将鼠标事件传给后面的函数 ballArry.push( new moveBall(e.offsetX,e.offsetY,colorArry[_.random(0,colorArry.length-1)]));//将鼠标每次移动产生的球存入ballArry中 }); setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); for(let i=0;i <= ballArry.length-1;i++){ //遍历ballArry数组绘制并更新小球的下一状态,将该状态替换原状态 ballArry[i].draw(); ballArry[i].update(); } },30); //设置定时30ms刷新一次小球状态在视觉上产生小球不断缩小的感觉 </script> </body> </html>
转载于:https://my.oschina.net/u/3763335/blog/1602765