这篇文章将为大家详细讲解有关es6与canvas如何实现鼠标小球跟随效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。首先，html部分，目前就一个canvas标签。 <canvas&nb
这篇文章将为大家详细讲解有关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如何实现鼠标小球跟随效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: ES6与canvas如何实现鼠标小球跟随效果
本文链接: https://lsjlt.com/news/253435.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0