ES6与canvas实现鼠标小球跟随效果
最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。
首先，html部分，目前就一个canvas标签。
<canvas id="canvas">
当前浏览器不支持！
</canvas>
其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式
<style>
body{
margin: 90px;
}
#canvas{
box-shadow: 0 0 5px;
}
</style>
最后，看下js实现部分
<script>
const canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 1000;
canvas.style.backgroundColor = "#000";
const ctx = canvas.getContext("2d"); //小球类
class Ball{
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
//小球半径默认40
this.r = 40;
}
//绘制小球
render(){
ctx.save();
ctx.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{
constructor(x, y, color){
super(x, y, color); this.dX = Math.floor(Math.random()*5+1);
this.dY = Math.floor(Math.random()*5+1);
this.dR = Math.floor(Math.random()*5+1);
} upData(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
} let ballArry = [];
let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; canvas.addEventListener("mousemove",function(e){
ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
}) setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i=0;i<ballArry.length;i++){
ballArry[i].render();
ballArry[i].upData();
}
},50);
</script>
稍作解释下我的设计思路：
首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。
在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。
最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。
最后附上完整代码。直接拷贝浏览器运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会动的小球</title>
<style>
body{
margin: 90px;
}
#canvas{
box-shadow: 0 0 5px;
}
</style>
</head>
<body>
<canvas id="canvas">
当前浏览器不支持！
</canvas>
<script>
const canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 1000;
canvas.style.backgroundColor = "#000";
const ctx = canvas.getContext("2d"); //小球类
class Ball{
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
//小球半径默认40
this.r = 40;
}
//绘制小球
render(){
ctx.save();
ctx.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{
constructor(x, y, color){
super(x, y, color); this.dX = Math.floor(Math.random()*5+1);
this.dY = Math.floor(Math.random()*5+1);
this.dR = Math.floor(Math.random()*5+1);
} upData(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
} let ballArry = [];
let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; canvas.addEventListener("mousemove",function(e){
ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
}) setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i=0;i<ballArry.length;i++){
ballArry[i].render();
ballArry[i].upData();
}
},50);
</script>
</body>
</html>
ES6与canvas实现鼠标小球跟随效果的更多相关文章
- canvas动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...
- 【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要: 元素的left位置 = 鼠标当 ...
- banner 跟随鼠标呈现视差效果
参考 Element 官网,利用 js / jq 和 css3, 实现某图片随着鼠标移动呈现的视差效果. <!DOCTYPE html> <html> <head> ...
- Canvas 动态小球重叠效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- （canvas）两小球碰撞后的速度问题研究
这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...
- day19—纯CSS实现菜单列表下框跟随效果
转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...
- vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
随机推荐
- BZOJ 1061: [Noi2008]志愿者招募【单纯形裸题】
1061: [Noi2008]志愿者招募 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 4813 Solved: 2877[Submit][Stat ...
- hdu_2604Queuing(快速幂矩阵)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2604 Queuing Time Limit: 10000/5000 MS (Java/Others) ...
- VS2012 TFS解决离职后代码遗留未迁入问题
第一步: 在命令行中输入 C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE 第二步: 根据用户查找该用户下workspac ...
- angular-dragon-drop.js 双向数据绑定拖拽的功能
在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...
- [国嵌攻略][104][Linux内核模块设计]
内核模块示例 #inlcude <linux/init.h> #inlcude <linux/module.h> static int hello_init(){ printk ...
- TypeScript笔记 5--变量声明(解构和展开)
解构是什么 解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...
- mysql按照天统计报表，当天没有数据，填0
1.问题复现: 按照天数统计每天的总数,如果其中有几天没有数据,那么group by 返回会忽略那几天,如何填充0?如下图,统计的10-3~10-10 7天的数据,其中只有8号和10号有数据,这样返回 ...
- Oracle_SQL92_连接查询
Oracle_SQL92_连接查询 笛卡儿积 --笛卡尔积 select * from emp;----14 select * from dept;----4 select * from emp, ...
- 基于VUE选择上传图片并在页面显示（图片可删除）
demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...
- 如何更改Linux的ssh端口
1. 修改/etc/ssh/sshd_config里的Port字段 Port 22改为Port 1000(你自定义的端口) 2. 重启sshd服务 #service sshd restart