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

最近闲来无聊，看了下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>

转载于:https://www.cnblogs.com/wzq201607/p/wzq_ball.html

ES6与canvas实现鼠标小球跟随效果相关推荐

案例：鼠标精灵跟随效果
案例:鼠标精灵跟随效果代码: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...
android小球移动代码,Android自定义圆形View实现小球跟随手指移动效果
本文实例为大家分享了Android实现小球跟随手指移动效果的具体代码,供大家参考,具体内容如下一. 需求功能手指在屏幕上滑动,红色的小球始终跟随手指移动. 实现的思路: 1)自定义View,在on ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas demo 下面是代码,操作解释都有注释: <!DOCTYPE html> ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
js实现鼠标跟随效果
在平时开发中,实现鼠标跟随效果并不是很常见,但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果.这里分享的是一个例子.代码如下,, 注意我这里跟随的是一个图片,也可以根 ...
mousemove实现图片鼠标跟随效果
前言用html+css+JavaScript实现了一个图片鼠标跟随效果一.思路鼠标不断的移动,使鼠标移动事件:mousemove: 在页面中移动,给document注册事件: 图片要移动距离,而 ...

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

ES6与canvas实现鼠标小球跟随效果相关推荐

最新文章

热门文章