canvas 鼠标动画特效之彩色小球球移动

最新推荐文章于 2023-04-01 23:44:04 发布

芋泥是小蓝白

最新推荐文章于 2023-04-01 23:44:04 发布

阅读量241

点赞数

分类专栏： canvas JavaScript 文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_45815557/article/details/115332176

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

效果图是可以动的，此处只截取了一个图片
在这里插入图片描述
详细代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标跟随彩色小球</title>
	</head>
	<body>
    <canvas id="canvas" width="600" height="500"></canvas>
    <script>
      // 1.获取画布
      // 2.获取上下文
      // 3.设置球的初始值,如:鼠标的x,y的坐标.小球的半径.小球的随机颜色
      // 4.设置小球的行进方向
      // 5.渲染小球(相当于绘制小球.看到小球的状态)
      // 6.对鼠标进行监听(小球的渲染是在鼠标监听的过程中进行渲染的)
      // 7.设置渲染状态 (利用定时器对动画进行渲染和更新,先渲染在更新,后边有个地方是先更新在渲染) 定时器内写的是要给当前小球更新和渲染
      // 8.对哪个小球进行渲染呢?要更新哪个小球,需要将这小球维护到一个数组里面       维护小球数组
      // 9.让球动起来  更新
      // 10.清屏ctx.clearRect(0,0,canvas.width,canvas.height);
      // 11.清除删除小球

      var canvas = document.getElementById("canvas");
      // 获取上下文
      var ctx = canvas.getContext("2d");

      // 球类
      // 鼠标的位置
      function Ball(x,y,r){
        this.x = x;
        this.y = y;
        // 初始半径
        this.r = r;
        // 设置随机颜色
        this.color = getRandom();
        // 设置小球在x轴行进方向
        // this.dx = parseInt(Math.random() * 10) ;  当它不减5的时候,小球的消失的方向是朝着一个方向
        // Math.random获取一个随机数  parseInt解析字符串,返回一个整数
        // 减5的时候随机数可能是一个负数,所以可以超四面八方消失
        this.dx = parseInt(Math.random() * 10) - 5;
        // 设置小球在y轴行进方向
        this.dy = parseInt(Math.random() * 10) - 5;
        // 每创建一个小球就将这个小球维护到数组中
        ballArr.push(this);//此时的this指向的是当前小球实例
      };
      //随机颜色 设置一个函数
      function getRandom(){
        var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
        // 通过数组对它进行拼接
        var allTypeArr = allType.split(",");
        // 遍历和渲染
        // 因为是16进制
        var color = "#"
        // i小于6是因为颜色的位数为6位
        for(var i = 0;i<6;i++){
          // 得到一个随机数
          // Math.random获取一个随机数  parseInt解析字符串,返回一个整数
          var random =parseInt( Math.random() * allTypeArr.length);
          // 随机下标取随机数，并组合成颜色 拼接for循环外的color,形成一个随机组合的颜色
          color += allTypeArr[random];
        }
        return color;
      }
      // 渲染小球
      // prototype 属性使您有能力向对象添加属性和方法
      Ball.prototype.render = function(){
        // 绘制小球
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI *2, false)
        ctx.fillStyle = this.color;
        ctx.fill()
      };
      // 在鼠标监听的过程中给小球进行渲染

      // canvas设置鼠标监听,鼠标移动的时候创建小球
      // addEventListener() 方法用于向指定元素添加事件句柄。
      canvas.addEventListener("mousemove",function(event){
        // 此处是new了一个新的Ball函数,在上边有一个Ball函数,括号内传的是那个函数的参数
        // 鼠标事件  offsetX鼠标距离画布canvas的下轴的距离  最后的数据是传过来的半径
        new Ball(event.offsetX,event.offsetY,30);
        // console.log(event.offsetX,event.offsetY)
        // new Ball(event.x,event.y,30);
        // console.log(event.x,event.y)
      });
      // 维护小球的数组
      var ballArr = [];

      // 让小球动起来 更新
      Ball.prototype.update = function(){
        // 小球的运动  行进方向
        this.x += this.dx;
        this.y += this.dy;
        this.r -= 0.4;  //小球的半径在慢慢的减小
        // 如果小球的半径小于0 从数组中删除
        if(this.r<0){
          this.remove()
        }
      };
      // 移除小球
      Ball.prototype.remove = function(){
        // 遍历小球
        for(var i = 0; i<ballArr.length;i++){
          if(ballArr[i] == this){
            ballArr.splice(i,1);
          }
        }
      };
      // 使用定时器进行动画渲染和更新 先更新后更渲染
      // 渲染和更新的时候需要对小球进行遍历
      setInterval(function(){
        // 动画逻辑清屏-更新-渲染
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // 遍历小球
        for(var i = 0 ; i< ballArr.length; i++ ){
          // 小球的更新
          ballArr[i].update();
          // 小球的渲染
          if( ballArr[i]){
            ballArr[i].render();
          }
        }
      },30);
    </script>
    <style>
      #canvas{border: 1px solid #0000FF;}
    </style>
	</body>
</html>

芋泥是小蓝白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 鼠标动画特效之彩色小球球移动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标跟随彩色小球</title> </head> <body> <canvas id="canvas" width="600" height="500"></canvas> <script> // 1.获取画布
复制链接

扫一扫