Question

我在画布上尝试了这两个并没有显示任何内容，我也怀疑它是否有效：/。我试图让屏幕上的雨下雨。想知道这样做最有效的方法是什么。我是动画的初学者，真的很感激帮助。

我怀疑创建一个雨天对象是最好的，每个都具有从屏幕上下来的质量然后到达顶部然后是一个带有它们的数组...可能具有随机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();
    }

Answer 1

这是你的答案，这场雪雨是使用纯HTML5 Canvas创建的，用于实现此动画的技术称为“双缓冲动画”。首先，了解什么是双缓冲动画技术很好。

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

这将如何帮助完整，假设我们必须创建一个具有非常高移动次数的动画，就像在我们的Snow Fall示例中，有许多Flakes正在以自己的速度移动，所以让它们保持移动，我们必须改变每个片状物的位置并在画布上更新它，这是一个非常繁重的处理过程。

所以现在不是直接在我们的页面画布上更新每个Flake，而是创建一个缓冲区Canvas，所有这些更改都会发生，我们只需要在30ms后从Buffer画布捕获一个Picture并将它显示在我们的真实画布上。

这样我们的动画就会很清晰，没有闪烁。所以这是一个实例。

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

干杯!!!

Answer 2

我不确定＆＃34;效率最高＆＃34;是。如果是我，我会在WebGL中做到这一点，但是对我来说效率是否有效。

在任何一种情况下，我都会尝试使用无状态公式。为每个雨滴创建和更新状态可能会很慢。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

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

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

html 5 canvas javascript rain动画（如何高效，轻松地实现！）

2 个答案: