canvas绘制瀑布雨(一看就懂)

最新推荐文章于 2024-04-09 18:03:12 发布

chen_0214

最新推荐文章于 2024-04-09 18:03:12 发布

阅读量579

点赞数

CC 4.0 BY-SA版权

文章标签： canvas

本文链接：https://blog.csdn.net/chen_0214/article/details/119299607

本文介绍如何使用HTML5 Canvas绘制下雨效果。通过循环绘制带渐变色的线条并利用定时器不断刷新画面来模拟雨水流动的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频不会上传，就用图片代替吧～～

先来说说思路吧～～

首先，最基本的得会用canvas绘制线条，
循环，按照拟定的稀疏去给定循环次数，即每次绘制一次结束之后记得清楚绘制，不然线条会连接。达不到想要的效果
按照自己想用的颜色去设置绘制线条的颜色，渐变等（createLinearGradient（））方法，不会的可以去百度看看很简单的
上面完成之后，基本这个静态的效果就已经出来了，只差最后一步～～～～。设置定时器，且每次定时器开始的时候要记得去清除整个屏幕的绘制，以假乱真达到想要的下雨特效

看代码，一看就懂

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        background-color: black;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        opacity: 0.7;
      }
    </style>
    <script src="./jQuery v3.5.1.js"></script>
  </head>
  <body>
    <canvas id="snow"></canvas>
  </body>
  <script>
    var canvas = document.getElementById('snow')
    var w = $(window).width()
    var h = $(window).height()
    canvas.width = w
    canvas.height = h

    // 设置x， y轴线条偏移量
    var offsetx = -15
    var offsety = 10

    var ctx = canvas.getContext('2d')

    function draw (x, y) {
      // 利用createLinearGradient方法 给绘制的图形添加渐变色
      var grd = ctx.createLinearGradient(x, y, x + offsetx, y + offsety)
      grd.addColorStop(0, 'rgba(0, 0, 0, 0)')
      grd.addColorStop(0.5, 'rgba(110, 110, 110, 1)')
      grd.addColorStop(1, 'rgba(255, 255, 255, 1)')
      ctx.strokeStyle = grd

      //   开始绘制
      ctx.beginPath()
      ctx.moveTo(x, y)
      ctx.lineTo(x + offsetx, y + offsety)
      ctx.lineWidth = 4
      ctx.stroke()
      //   清除绘制， 即执行循环进行其他位置绘制
      ctx.closePath()
    }

    setInterval(() => {
      //  *重点， 清除屏幕绘制， 以达到下雨特效
      ctx.clearRect(0, 0, w, h)
      //   循环， 即在不同位置绘制， i的数值，决定下雨密度大小
      for (var i = 1; i < 100; i++) {
        draw(Math.random() * w, Math.random() * h)
      }
    }, 100)
  </script>
</html>