没有合适的资源?快使用搜索试试~ 我知道了~
最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效——随着鼠标的移动,会有小球跟随且自动消失的动画。 首先,html部分,目前就一个canvas标签。 <canvas id=canvas> 当前浏览器不支持! </canvas> 其次,css部分,没有考虑美观,大家喜欢的话,可以自己添加样式 <style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style>
资源详情
资源评论
资源推荐
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();
}
weixin_38706007
- 粉丝: 6
- 资源: 911
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 10.php面试题_百度.doc
- 11.php面试题_腾讯.doc
- 08.NET面试题大全,包括微软、华为、中兴等大企业的面试真题.doc
- 07.Java面试宝典.doc
- 05.IT项目经理考题 V1-answer.doc
- 09.PHP经典面试题(基础型)附答案.doc
- 04.IT系统分析员考题 v1-answer.doc
- 13.华为瑞星360等公司软件测试工程师面试题.doc
- 14.软件测试经典面试题.doc
- 人力资源题库.doc
- 01.46家公司笔试面试题.doc
- 12.人事专员笔试题.doc
- 推广案例题.doc
- MD小组讨论题(十一).doc
- MD小组讨论题(六).doc
- MD小组讨论题(二).doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0