今天看啥
热点:

ES6与canvas实现鼠标小球跟随效果,es6canvas小球跟随


               最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效——随着鼠标的移动,会有小球跟随且自动消失的动画

首先,html部分,目前就一个canvas标签。

1 <canvas id="canvas">
2         当前浏览器不支持!
3 </canvas>

其次,css部分,没有考虑美观,大家喜欢的话,可以自己添加样式

1 <style>
2         body{
3             margin: 90px;
4         }
5         #canvas{
6             box-shadow: 0 0 5px;
7         }
8     </style>

最后,看下js实现部分

 1 <script>
 2     const canvas = document.getElementById("canvas");
 3     canvas.height = 600;
 4     canvas.width = 1000;
 5     canvas.style.backgroundColor = "#000";
 6     const ctx = canvas.getContext("2d");
 7 
 8     //小球类
 9     class Ball{
10         constructor(x, y, color){
11             this.x = x;
12             this.y = y;
13             this.color = color;
14             //小球半径默认40
15             this.r = 40;
16         }
17         //绘制小球
18         render(){
19             ctx.save();
20             ctx.beginPath();
21             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
22             ctx.fillStyle = this.color;
23             ctx.fill();
24             ctx.restore();
25         }
26     }
27     //移动小球
28     class MoveBall extends Ball{
29         constructor(x, y, color){
30             super(x, y, color);
31 
32             this.dX = Math.floor(Math.random()*5+1);
33             this.dY = Math.floor(Math.random()*5+1);
34             this.dR = Math.floor(Math.random()*5+1);
35         }
36 
37         upData(){
38             this.x += this.dX;
39             this.y += this.dY;
40             this.r -= this.dR;
41             if(this.r < 0){
42                 this.r = 0;
43             }
44         }
45     }
46 
47     let ballArry = [];
48     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
49 
50     canvas.addEventListener("mousemove",function(e){
51         ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
52     })
53 
54     setInterval(function(){
55         ctx.clearRect(0, 0, canvas.width, canvas.height);
56 
57         for(let i=0;i<ballArry.length;i++){
58             ballArry[i].render();
59             ballArry[i].upData();
60         }
61     },50);
62     </script>

稍作解释下我的设计思路:

首先,获取canvas对象,获取上下文,设置一些基本的属性。(canvas不做过多描述,具体的可以去w3自己研究)。然后,先定义一个Ball的类,里面有小球的圆心坐标位置,以及半径和颜色。在定义一个画小球的方法,具体的画圆实现,不懂的可以去canvas文档自己去看。

在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法,用来改变小球的半径以及颜色属相。

最后,开启一个定时器,当鼠标移动时,把生成的小球存储到数组中,然后遍历循环读取小球,并改变小球的样式,达到最终的效果。

最后附上完整代码。直接拷贝浏览器运行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>会动的小球</title>
 6     <style>
 7         body{
 8             margin: 90px;
 9         }
10         #canvas{
11             box-shadow: 0 0 5px;
12         }
13     </style>
14 </head>
15 <body>
16     <canvas id="canvas">
17         当前浏览器不支持!
18     </canvas>
19     <script>
20     const canvas = document.getElementById("canvas");
21     canvas.height = 600;
22     canvas.width = 1000;
23     canvas.style.backgroundColor = "#000";
24     const ctx = canvas.getContext("2d");
25 
26     //小球类
27     class Ball{
28         constructor(x, y, color){
29             this.x = x;
30             this.y = y;
31             this.color = color;
32             //小球半径默认40
33             this.r = 40;
34         }
35         //绘制小球
36         render(){
37             ctx.save();
38             ctx.beginPath();
39             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
40             ctx.fillStyle = this.color;
41             ctx.fill();
42             ctx.restore();
43         }
44     }
45     //移动小球
46     class MoveBall extends Ball{
47         constructor(x, y, color){
48             super(x, y, color);
49 
50             this.dX = Math.floor(Math.random()*5+1);
51             this.dY = Math.floor(Math.random()*5+1);
52             this.dR = Math.floor(Math.random()*5+1);
53         }
54 
55         upData(){
56             this.x += this.dX;
57             this.y += this.dY;
58             this.r -= this.dR;
59             if(this.r < 0){
60                 this.r = 0;
61             }
62         }
63     }
64 
65     let ballArry = [];
66     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
67 
68     canvas.addEventListener("mousemove",function(e){
69         ballArry.push(new MoveBall(e.offsetX, e.offsetY,         colorArry[Math.floor(Math.random()*5)]));
70     })
71 
72     setInterval(function(){
73         ctx.clearRect(0, 0, canvas.width, canvas.height);
74 
75         for(let i=0;i<ballArry.length;i++){
76             ballArry[i].render();
77             ballArry[i].upData();
78         }
79     },50);
80     </script>
81 </body>
82 </html>        

 

www.bkjia.comtruehttp://www.bkjia.com/HTML5/1303963.htmlTechArticleES6与canvas实现鼠标小球跟随效果,es6canvas小球跟随 最近闲来无聊,看了下 ES6 的语法,结合 canvas 实现了动画特效—— 随着鼠标的移动,会...

相关文章

相关搜索: html5

帮客评论

视觉看点