首页 > 其他分享> > JS 雪花飘落效果玩转 canvas 绘图码农的每日积累 -匠心之作

JS 雪花飘落效果玩转 canvas 绘图码农的每日积累 -匠心之作

2020-12-03 09:05:49 作者：互联网

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

HTML5 元素 canvas 用于图形的绘制, canvas 标签只是图形容器，通常使用 JavaScript 来完成绘制，如绘制路径,盒、圆、字符以及添加图像。

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 是一个二维网格 canvas 的左上角坐标为 (0,0)。

<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8">
  <style>
    body {
      background-image: url("snow_pc.png");
      background-size: cover;
      /*background-color: black;*/
      /*color: white;*/
    }

    #snow {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
    }
  </style>
</head>
<body>


</body>
</html>


<script type="text/javascript">

  //第一步 创建画布
  var snowCanvas = document.createElement('canvas');
  //设置一个id
  snowCanvas.id = 'snow';
  //设置一个画布的宽度与高度
  snowCanvas.width = window.innerWidth;
  snowCanvas.height = window.innerHeight;
  //将创建的画布添加到body中去
  document.getElementsByTagName('body')[0].appendChild(snowCanvas);

  //成员变量记录一下
  this.canvas = snowCanvas;
  var that = this;
  //窗口改变时修改画布大小
  window.onresize = function() {
    that.canvas.width = window.innerWidth;
    that.canvas.height = window.innerHeight;
  };

  //第二步 创建雪花
  //使用对象来保存雪花的信息
  function snowInfo() {
    var innerWidth = window.innerWidth;
    var innerHeight = window.innerHeight;
    //雪花的基本位置信息
    //随机  0.0  ~ 当前窗口的宽度
    this.x = Math.floor(Math.random() * innerWidth);
    this.y = Math.floor(Math.random() * innerHeight);
    //半径 5 ~ 15
    this.radius = Math.random() * 3 + 5;
    //下落的速度  1.5 ~ 2.5
    this.speed = Math.random() + 1.5;
  }

  //创建雪花的数组
  var list = [];

  for (var i = 0; i < 1000; i++) {
    list.push(new snowInfo());
  }


  //第三步 绘制
  this.ctx = this.snowCanvas.getContext('2d');

  function drawSnow() {
    var ctx = this.ctx;
    var canvas = this.snowCanvas;
    //清空一下画布
    ctx.clearRect(0, 0, this.snowCanvas.width, this.snowCanvas.height);

    //循环绘制所的有的雪花
    for (var i = 0; i < list.length; i++) {
      //当前的雪花
      var item = list[i];

      //当前的位置  y 坐标递增 就出现了向下移动的效果
      item.y += item.speed;

      //控制下边界
      if (item.y >= canvas.height) {
        item.y = 0;
      }

      //创建雪花的渐变
      var snowGradient = ctx.createRadialGradient(item.x, item.y, 0, item.x, item.y, item.radius);
      //设置渐变的颜色组 中间白色 边缘透明
      snowGradient.addColorStop(0.0, 'rgba(255,255,255,0.9)');//红 绿 蓝 透明度
      snowGradient.addColorStop(0.5, 'rgba(255,255,255,0.5)');//红 绿 蓝 透明度
      snowGradient.addColorStop(1.0, 'rgba(255,255,255,0.0)');//红 绿 蓝 透明度

      ctx.save();
      //设置填充样式
      ctx.fillStyle = snowGradient;

      ctx.beginPath();
      //绘制当前的圆 使用画弧 Math.PI*2 一周
      ctx.arc(item.x, item.y, item.radius, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  }

  //第四步 定时循环
  //100毫秒绘制一次
  setInterval('drawSnow()', 10);


</script>

标签：匠心,canvas,ctx,JS,item,snowCanvas,var,255
来源： https://blog.csdn.net/zl18603543572/article/details/110296063

JS 雪花飘落效果 玩转 canvas 绘图 码农的每日积累 -匠心之作

JS 雪花飘落效果玩转 canvas 绘图码农的每日积累 -匠心之作