html 5 canvas javascript下雨动画（如何高效轻松实现！）答案

【问题标题】：html 5 canvas javascript rain animation(how to implement efficiently and easily!)html 5 canvas javascript下雨动画（如何高效轻松实现！）
【发布时间】：2012-06-04 07:02:43
【问题描述】：

我在画布上尝试了这两种方法，但没有任何显示，我也怀疑它是否有效：/。我正在尝试从屏幕上下雨..想知道最有效的方法是什么。我是动画初学者，非常感谢帮助。

我怀疑创建一个雨对象是最好的，每个对象的质量都是从屏幕上下来然后到顶部，然后是一个数组……也许是随机的 x 值，画布宽度和 y 值0 但我不知道如何实现。请帮忙！

                xofRain = 20;
        startY = 0;
        ctx.beginPath();
        ctx.moveTo(xofRain, startY);
        ctx.lineTo(xofRain, startY + 20);
        ctx.closePath();
        ctx.fillStyle = "black"; 
        ctx.fill();


     function rain(xofRain){

        startY = canvas.height();

        ctx.moveTo(xofRain, startY);
        ctx.beginPath();
        ctx.lineTo(xofRain, startY + 3);
        ctx.closePath();
        ctx.fillStyle = "blue"; 
        ctx.fill();
    }

【问题讨论】：

这个“雨”应该是什么样子？只有蓝色条纹？（不是折射水，对吧？）
是的，没错！简单的蓝色条纹

标签： javascript html animation html5-canvas

【解决方案1】：

你的答案来了，这个雪雨是使用纯 HTML5 Canvas 制作的，用来实现这个动画的技术叫做“双缓冲动画”。首先了解一下什么是双缓冲动画技术是很好的。

双缓冲技术：这是一种先进的技术，可以使动画清晰且闪烁更少。在该技术中使用了2个Canvas，一个显示在网页上以显示结果，另一个用于在后台创建动画屏幕。

这将如何帮助我们充分发挥作用，假设我们必须创建一个移动次数非常多的动画，就像在我们的 Snow Fall 示例中，有许多 Flakes 以自己的速度移动，所以保持它们移动，我们必须改变每个薄片的位置并在画布上更新它，这是一个相当繁重的过程。

所以现在不是直接在我们的页面画布上更新每个 Flake，我们将创建一个缓冲区画布，所有这些更改都会在其中发生，我们只需在 30 毫秒后从缓冲区画布中捕获一张图片并将其显示在我们的真实画布上。

这样我们的动画将清晰无闪烁。所以这里有一个活生生的例子。

http://aspspider.info/erishaan8/html5rain/

这是它的代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>HTML5 Rain</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      article, aside, figure, footer, header, hgroup, 
      menu, nav, section { display: block; }
    </style>
    <script type="text/javascript">
        var canvas = null;
        var context = null;
        var bufferCanvas = null;
        var bufferCanvasCtx = null;
        var flakeArray = [];
        var flakeTimer = null;
        var maxFlakes = 200; // Here you may set max flackes to be created 
    
        function init() {
            //Canvas on Page
            canvas = document.getElementById('canvasRain');
            context = canvas.getContext("2d");
            //Buffer Canvas
            bufferCanvas = document.createElement("canvas");
            bufferCanvasCtx = bufferCanvas.getContext("2d");
            bufferCanvasCtx.canvas.width = context.canvas.width;
            bufferCanvasCtx.canvas.height = context.canvas.height;
    
            
            flakeTimer = setInterval(addFlake, 200);
    
            Draw();
    
            setInterval(animate, 30);
             
        }
        function animate() {
            
            Update();
            Draw();
            
        }
        function addFlake() {
    
            flakeArray[flakeArray.length] = new Flake();
            if (flakeArray.length == maxFlakes)
                clearInterval(flakeTimer);
        }
        function blank() {
            bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
            bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
            
        }
        function Update() {
            for (var i = 0; i < flakeArray.length; i++) {
                if (flakeArray[i].y < context.canvas.height) {
                    flakeArray[i].y += flakeArray[i].speed;
                    if (flakeArray[i].y > context.canvas.height)
                        flakeArray[i].y = -5;
                    flakeArray[i].x += flakeArray[i].drift;
                    if (flakeArray[i].x > context.canvas.width)
                        flakeArray[i].x = 0;
                }
            }
            
        }
        function Flake() {
            this.x = Math.round(Math.random() * context.canvas.width);
            this.y = -10;
            this.drift = Math.random();
            this.speed = Math.round(Math.random() * 5) + 1;
            this.width = (Math.random() * 3) + 2;
            this.height = this.width;
        }
        function Draw() {
            context.save();
            
            blank();
    
            for (var i = 0; i < flakeArray.length; i++) {
                bufferCanvasCtx.fillStyle = "white";
                bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
            }
    
            
            context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
            context.restore();
        }
      
    </script>
    </head>
    <body onload="init()">
      <canvas  id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
    </body>
    </html>

此外，如果您发现此帮助已满，请接受作为答案并补充。 o_O

干杯！！！

【讨论】：

【解决方案2】：

我不确定什么是“最有效”。如果是我，我会在 WebGL 中进行，但我不清楚这是否有效。

无论哪种情况，我都会尝试使用无状态公式。可以说为每个雨滴创建和更新状态很慢。

const ctx = document.querySelector("canvas").getContext("2d");
const numRain = 200;

function render(time) {
  time *= 0.001;  // convert to seconds
  
  resizeCanvasToDisplaySize(ctx.canvas);
  
  const width = ctx.canvas.width;
  const height = ctx.canvas.height;
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, width, height);  
  
  resetPseudoRandom();
  
  const speed = time * 500;
  ctx.fillStyle = "#68F";
  for (let i = 0; i < numRain; ++i) {
    const x = pseudoRandomInt(width);
    const y = (pseudoRandomInt(height) + speed) % height;
    ctx.fillRect(x, y, 3, 8);
  }
  
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

let randomSeed_ = 0;
const RANDOM_RANGE_ = Math.pow(2, 32);

function pseudoRandom() {
  return (randomSeed_ =
          (134775813 * randomSeed_ + 1) %
          RANDOM_RANGE_) / RANDOM_RANGE_;
};

function resetPseudoRandom() {
  randomSeed_ = 0;
};

function pseudoRandomInt(n) {
  return pseudoRandom() * n | 0;
}

function resizeCanvasToDisplaySize(canvas) {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
  }
}

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

&lt;canvas&gt;&lt;/canvas&gt;

请注意，我可以为每一行使用ctx.moveTo(x, y); ctx.lineTo(x, y + 8);，然后在循环结束时调用ctx.stroke()。我没有这样做，因为我认为它的效率会低于使用ctx.fillRect。为了让画布绘制线条，它实际上必须分配一个动态路径（您调用ctx.beginPath）。然后它必须记录您添加的所有行。然后它必须将这些线扩展为各种顶点以栅格化这些线。你基本上可以see the various algorithms it uses here。相反，ctx.fillRect 则不会发生这种情况。不必发生分配（不是说它们不会发生，只是说它们不必发生）。画布可以只使用一个预先分配的四边形，并通过传递正确的矩阵来在 GPU 上绘制它，以绘制您要求的任何矩形。当然，调用 ctx.fillRect 200 次而不是 ctx.moveTo、ctx.lineTo 200s + ctx.stroke 一次的开销可能更大，但这实际上取决于浏览器。

上面的雨可能是也可能不是足够好的降雨效果。那不是我发帖的真正目的。重点是效率。几乎所有具有某种下雨效果的游戏都为他们的下雨做了某种无状态公式。不同的公式会产生不同的或更少重复的雨。关键是它是无状态的。

【讨论】：