html5 canvas圆点跟随鼠标光标移动

最新推荐文章于 2024-04-17 17:10:25 发布

agoling

最新推荐文章于 2024-04-17 17:10:25 发布

阅读量4k

点赞数

分类专栏：前端 HTML5 帆布 H5 鼠标光标

本文链接：https://blog.csdn.net/agoling/article/details/83142272

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

帆布

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标demo</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
   //设置画布
const canvas=document.getElementById("canvas");
   const ctx=canvas.getContext('2d');
   canvas.width=1900;
   canvas.height=900;
   canvas.style.backgroundColor = "#000";

let ballArr = [];
let colorArr = ['red', "blue", 'green'];

   let mouseInCanvas = false;
   let offsetX;//通过事件获取鼠标X
   let offsetY;//通过事件获取鼠标Y
   let r = 150;//球的半径

   //小球类
   class Ball{
       constructor(x,y,color){
           this.x=x;
           this.y=y;
           this.color=color;
           this.r=r;
       }
       //绘制小球
       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);
       }

       Update(){
           this.x += this.dX;
           this.y += this.dY;
           this.r -= this.dR;
           if (this.r < 0) {
               this.r = 0;
                   }
       }
   }

//鼠标移动
   canvas.addEventListener('mousemove',
   function(e) {
   mouseInCanvas = true;
   offsetX = e.offsetX;
   offsetY = e.offsetY;

   });
//鼠标出画布
   canvas.addEventListener('mouseout',
   function(e) {
   mouseInCanvas = false;
   });
//鼠标进画布
   canvas.addEventListener('mouseover',
   function(e) {
   mouseInCanvas = true;
   });

   setInterval(function () {
   if (mouseInCanvas) {
//圆圈移动
   ballArr.push(new MoveBall(offsetX, offsetY, colorArr[1]));
   }
       ctx.clearRect(0,0,canvas.width,canvas.height);

       for (let i=0;i<ballArr.length;i++) {
                   ballArr[i].render();
           ballArr[i].Update();
               }
   },50);
</script>
</body>
</html>

agoling

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
html5 canvas圆点跟随鼠标光标移动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标demo&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;canvas id="canvas&
复制链接

扫一扫