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() : 开始绘制一个新路 ...
随机推荐
- [51nod1329]路径游戏
Snuke与Sothe两个人在玩一个游戏.游戏在一个2*N的网格中进行(2行N列),这个网格中的2N个格子不是黑色就是白色.定义,一条有效路径是指一个完全由白色格子构成的序列,这个序列的第一个网格元素 ...
- HDU 1241 DFS
Oil Deposits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- HDU--2115
I Love This Game Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 来说说datatype
今天敲代码一直卡在一个问题上面好久那就是--datatype的未定义,起初不晓得datatype的含义,遇到这种情况首先想到的就是自己又忘记加上面头文件了.随即写了个stdlib.h上去.可是问题并没 ...
- ionic2 安装与cordova打包
1.安装: cnpm install -g cordova ionic ionic start name cd name cnpm install 2.环境配置: http://www.cnblo ...
- 动态计算rem的js代码
以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...
- [国嵌笔记][033-034][设置svc模式]
[设置svc模式] 设置CPU为SVC模式 1.因为初始化系统需要有很高的权限,SVC模式具有该权限,所以首先要使系统工作在SVC(0b10011)模式 2.设置cprs为0xd3(0b1101001 ...
- Tomcat学习笔记（二）—— 一个简单的Servlet容器
1.简介:Servlet编程是通过javax.Servlet和javax.servlet.http这两个包的类和接口实现的,其中javax.servlet.Servlet接口至关重要,所有的Servl ...
- [最直白版]一步一步教你用VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程
[最直白版]Win10下一步一步教你用 VMware Workstation12安装Ubuntu 16.04和VMware Tools的教程 安装过程中使用的软件(要保证电脑里面有下列三个东西): 1 ...
- 转载]浅析DEDECMS织梦留言板调用网站head.htm以及自定义的方法
原文地址:浅析DEDECMS织梦留言板调用网站head.htm以及自定义的方法作者:it_wang 今天,一个客户朋友问到织梦留言板如何调用head.htm以及自定义,企业网站源码之前有摸索过,但是没 ...