canvas特效背景

瓜不脆-_-#

已于 2023-04-03 10:42:42 修改

阅读量114

点赞数

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

于 2023-03-06 16:04:22 首次发布

本文链接：https://blog.csdn.net/weixin_44941683/article/details/129364354

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章展示了如何使用HTML5的CanvasAPI创建一个名为跃动精灵的动态背景特效。代码通过JavaScript实现小球的移动和碰撞反弹，同时当鼠标移动时会生成新的小圆，增加了交互性。项目源码托管在GitHub和Gitee上。

摘要由CSDN通过智能技术生成

canvas特效背景

跃动精灵

github:https://github.com/730944000/elves_canvas
gitee:https://gitee.com/codemonkeyking/elves_canvas
git放这了，xdm什么意思就不多说了在这里插入图片描述
话不多说看效果和代码

效果如图
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跃动精灵(canvas实现)</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            width: 100%;
            height:100%;
            /*去掉浏览器默认垂直和水平滑动条*/
            overflow:hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script>
   var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var w = (canvas.width = document.documentElement.clientWidth);
    var h = (canvas.height = document.documentElement.clientHeight);
    var offsetX = 0;
    var offsetY = 0;
    //  x 横坐标
    //  y 纵坐标
    //  vx 横向移动速度
    //  vy 纵向移动速度
    //  size 小球的半径
    //  color 颜色

    function Ball(x, y, vx, vy, size, color) {
      this.x = x;
      this.y = y;
      this.vx = vx;
      this.vy = vy;
      this.size = size;
      this.color = color;
    }

    Ball.prototype.draw = function () {
      // 开始绘制（路径）
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.shadowColor='yellow'
      ctx.shadowBlur=10
      ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
      ctx.fill();
    };

    Ball.prototype.update = function () {
      if (this.x + this.size >= w || this.x - this.size <= 0) {
        this.vx = -this.vx;
      }

      if (this.y + this.size >= h || this.y - this.size <= 0) {
        this.vy = -this.vy;
      }

      // 根据速度值改动小球的坐标
      this.x += this.vx;
      this.y += this.vy;
    };

    function random(min, max) {
      let num = Math.floor(Math.random() * (max - min) + min);
      if (num === 0) {
        num = Math.random() * Math.min([w, h]);
      }
      return num;
    }
    var list = [];
    for (let i = 0; i <= 100; i++) {
      let circle = new Ball(random(0, w), random(0, h), random(-10, 10) * (1 / 10.0), random(-10, 10) * (1 / 10.0), 2, '#fff');
      list.push(circle);
    }

    var arr = [];
    function circle(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.alpha=1;
      this.color = 'Gold';
          /* 圆的移动方向 */
      if(offsetX - x>=0&&offsetY - y>=0){
        this.xMove=Math.random()*2
        this.yMove=Math.random()*2
      }else if(offsetX - x<0&&offsetY - y>=0 ){
        this.xMove=Math.random()*-2
        this.yMove=Math.random()*2
      }else if(offsetX - x>=0&&offsetY - y<0 ){
        this.xMove=Math.random()*2
        this.yMove=Math.random()*-2
      }else{
        this.xMove=Math.random()*-2
        this.yMove=Math.random()*-2
      }
      
      if (this) {
        arr.push(this);
      }
    }

    circle.prototype.updated = function () {
      this.x = this.x + this.xMove;
      this.y = this.y + this.yMove;
      this.r = this.r - 0.2;
      if (this.r < 0) {
        this.remove();
      }
    };

    circle.prototype.remove = function () {
      for (let i = 0; i < arr.length; i++) {
        if (this == arr[i]) {
          arr.splice(i, 1);
        }
      }
    };
    /* 渲染小圆 */
    circle.prototype.render = function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, 2 * 3.14, false);
      ctx.fillStyle = this.color;
       ctx.shadowColor='white'
      ctx.shadowBlur=8
      ctx.fill();
    };


    function animation() {
      ctx.globalCompositeOperation = 'source-over';
      var lingrad = ctx.createLinearGradient(0, 0, 0, h);
      lingrad.addColorStop(0, '#ff9999');
      lingrad.addColorStop(0.5, '#ccBBBB');
      lingrad.addColorStop(1, '#87ceeb');
      ctx.fillStyle = lingrad;
      ctx.fillRect(0, 0, w, h);
      for (let i = 0; i < list.length; i++) {
        list[i].draw();
        list[i].update();
      }
      for (let i = 0; i < arr.length; i++) {
        arr[i].updated();
        if (arr.length != 0 && arr[i]?.render()) {
          arr[i].render();
        }
      }

   
      window.requestAnimationFrame(animation);
    }
    addEventListener('resize', () => {
      w = canvas.width = document.documentElement.clientWidth;
      h = canvas.height = document.documentElement.clientHeight;
    });

    animation();

    canvas.addEventListener('mousemove', (e) => {
      new circle(e.offsetX, e.offsetY, Math.random() * 8);
      offsetX = e.offsetX;
      offsetY = e.offsetY;
    });
</script>