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() : 开始绘制一个新路 ...
随机推荐
- 【Keras】基于SegNet和U-Net的遥感图像语义分割
上两个月参加了个比赛,做的是对遥感高清图像做语义分割,美其名曰"天空之眼".这两周数据挖掘课期末project我们组选的课题也是遥感图像的语义分割,所以刚好又把前段时间做的成果重新 ...
- Logger之Logger.getLogger(CLass)技巧代替system.out.print
---恢复内容开始--- 尊重原创:http://www.cnblogs.com/zxf330301/p/5876117.html 之前一直在使用System.out.println()来调试.但是用 ...
- 文件末尾判断feof
feof 作用:如果文件结束,则返回非0值,否则返回0 但要注意的是feof要读取到文件结束标志EOF后,才能判断文件是否结束. 所以使用while(!feof(pFile))会出现最后fread会返 ...
- day2 作业
1.判断下列逻辑语句的True,False. 1),1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6 ...
- 主题：Windows系统服务器磁盘挂载
可能很多人发现VPS重装之后D盘.E盘不见了,其实并没有不见只是磁盘未挂载,下面由小编来为大家讲讲如何挂载磁盘 远程登录服务器后,桌面上只有一个回收站的,我们在桌面空白处右键属性-->桌面--& ...
- phthon网络编程
软件开发架构 既然谈起网络编程,就得说说软件开发的架构: c/s架构 C/S结构软件(即客户机/服务器模式)分为客户机和服务器两层,客户机不是毫无运算能力的输入.输出设备,而是具有了一定的数据处理和数 ...
- 进程间通信之利用CreateFilemapping()
这两天在复习进程间通信,复习一下记不住,复习一下记不住...就写个小博客献个丑,先来第一个内存映射 代码亲测通过 CreateFileMapping()的最后的一位用来做进程间通信 步骤: 1.Cre ...
- 设置vs环境
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- vuejs axios安装配置与使用
1.安装服务 npm install --save axios vue-axios 2.在main.js import axios from 'axios' import VueAxios from ...
- _0_web_基础
创:18_3_2017修:20_3_2017 什么是前端? --在浏览器中展示内容以及处理请求 什么是浏览器? --一款能将网页内容展现给用户查看,并且让用户与网页交互的软件 什么是内核? --渲染引 ...