HTML 5画布的JavaScript雨动画（如何高效，轻松实现！） [英] html 5 canvas javascript rain animation(how to implement efficiently and easily!)
问题描述
我在画布尝试这两个并没有什么表现，也是我怀疑它甚至高效：/。我试图做出归结屏幕雨..想知道什么是这样做的最有效的方式。我在动画一个初学者，倒很AP preciate帮助。
我怀疑创建雨对象将是最好的，每个灌进屏幕，然后来到顶端的质量，然后用它们的阵列...也许用随机x值withing画布宽度和y值0，但我不知道如何实现这一点。请帮助！
xofRain = 20;
startY = 0;
ctx.beginPath（）;
ctx.moveTo（xofRain，startY）;
ctx.lineTo（xofRain，startY + 20）;
ctx.closePath（）;
ctx.fillStyle =黑色;
ctx.fill（）;
功能雨（xofRain）{ startY = canvas.height（）; ctx.moveTo（xofRain，startY）;
ctx.beginPath（）;
ctx.lineTo（xofRain，startY + 3）;
ctx.closePath（）;
ctx.fillStyle =蓝色;
ctx.fill（）;
}
下面来你的答案，采用纯HTML5画布，用来实现这个动画被称为双缓冲动画的技术创建了这个下雪下雨。首先这是好事，知道什么是双缓存动画技术。
双缓冲技术：这是一种先进的技术，使动画清晰，并与它无闪烁。在该技术2帆布被使用，其中一个显示在网页上显示的结果，第二个是用于在备份过程以创建动画的屏幕。
这将如何有助于全面，假设我们要创建一个动画具有非常高的数字的举动，因为在我们的降雪例如，有薄片的数量与有自己的速度运动，所以让他们感动，我们要改变每个片的位置，并更新其在画布上，这是相当沉重进程来处理。
所以现在，而不是直接在我们的网页画布更新每个片状，我们将创建一个缓冲画布，所有这些变化发生，我们只是捕捉缓冲画布上图片30毫秒后和我们真正的画布上显示出来。
这样，我们的动画将是明确的，无闪烁。因此，这里是它的一个活生生的例子。
http://aspspider.info/erishaan8/html5rain/
下面是它的code：
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆LT;间的charset = UTF-8 /＆GT;\r
＆LT;标题＆GT; HTML5雨＆LT; /标题＆GT;\r
＆LT;！ - [如果IE＆GT;\r
＆所述; SCRIPT SRC =HTTP：//html5shiv.google$c$c.com/svn/trunk/html5.js＆GT;＆下; /脚本＆GT;\r
百分比抑制率ENDIF] - GT！;\r
＆LT;风格＆GT;\r
文章不谈，人物，页脚，页眉，hgroup，\r
菜单，导航，部分{显示：块; }\r
＆LT; /风格＆GT;\r
＆LT;脚本类型=文/ JavaScript的＆GT;\r
VAR帆布= NULL;\r
VAR语境= NULL;\r
VAR bufferCanvas = NULL;\r
VAR bufferCanvasCtx = NULL;\r
变种flakeArray = [];\r
VAR flakeTimer = NULL;\r
VAR maxFlakes = 200; //在这里，您可以设置最大flackes要创建\r
\r
功能的init（）{\r
//画布上页\r
画布=的document.getElementById（'canvasRain'）;\r
上下文= canvas.getContext（2D）;\r
//缓冲区帆布\r
bufferCanvas = document.createElement方法（画布上）;\r
bufferCanvasCtx = bufferCanvas.getContext（2D）;\r
bufferCanvasCtx.canvas.width = context.canvas.width;\r
bufferCanvasCtx.canvas.height = context.canvas.height;\r
\r
\r
flakeTimer =的setInterval（addFlake，200）;\r
\r
画（）;\r
\r
的setInterval（动画，30）;\r
\r
}\r
功能动画（）{\r
\r
更新（）;\r
画（）;\r
\r
}\r
功能addFlake（）{\r
\r
flakeArray [flakeArray.length] =新片状（）;\r
如果（flakeArray.length == maxFlakes）\r
clearInterval（flakeTimer）;\r
}\r
功能空白（）{\r
bufferCanvasCtx.fillStyle =RGBA（0,0,0,0.8）;\r
bufferCanvasCtx.fillRect（0，0，bufferCanvasCtx.canvas.width，bufferCanvasCtx.canvas.height）;\r
\r
}\r
功能更新（）{\r
对于（VAR I = 0; I＆LT; flakeArray.length;我++）{\r
如果（flakeArray [I] .Y＆LT; context.canvas.height）{\r
flakeArray [I] .Y + = flakeArray [I]。速度;\r
如果（flakeArray [I] .Y＆GT; context.canvas.height）\r
flakeArray [I] .Y = -5;\r
flakeArray [I] .X + = flakeArray [I] .drift;\r
如果（flakeArray [I] .X＆GT; context.canvas.width）\r
flakeArray [I] .X = 0;\r
}\r
}\r
\r
}\r
功能片状（）{\r
this.x = Math.round（的Math.random（）* context.canvas.width）;\r
this.y = -10;\r
this.drift =的Math.random（）;\r
this.speed = Math.round（的Math.random（）* 5）+ 1;\r
this.width =（的Math.random（）* 3）+ 2;\r
this.height = this.width;\r
}\r
功能抽奖（）{\r
context.save（）;\r
\r
空白（）;\r
\r
对于（VAR I = 0; I＆LT; flakeArray.length;我++）{\r
bufferCanvasCtx.fillStyle =白;\r
bufferCanvasCtx.fillRect（flakeArray [I] .X，flakeArray [I] .Y，flakeArray [I] .WIDTH，flakeArray [I] .height）;\r
}\r
\r
\r
context.drawImage（bufferCanvas，0，0，bufferCanvas.width，bufferCanvas.height）;\r
context.restore（）;\r
}\r
\r
＆LT; / SCRIPT＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体的onload =的init（）＆GT;\r
＆LT;帆布ID =canvasRainWIDTH =800像素HEIGHT =800像素＆GT;画布不支持＆LT; /帆布＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
此外，如果你发现这个帮助完整，接受并回答和补回来。 O_O
干杯！
I tried both of these in canvas and nothing showed, also I doubt it is even efficient :/. I am trying to make rain that comes down the screen.. Wondering what is the most efficient way of doing this. I am a beginner at animation and would really appreciate help.
I suspect that creating a rain object would be best, each with the quality of coming down the screen then coming to the top and then an array with them...maybe with random x values withing the canvas width and y values of 0 but I don't know how to implement that. Please help!
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();
}
Here comes your answer, this snow rain is created using pure HTML5 Canvas, the technique used to achieve this animation is called "Double Buffer Animation". First it is good to know what is Double Buffer animation technique.
Double Buffer Technique: This is an advanced technique to make animation clear and with less flickers in it. In this technique 2 Canvas is used, one is displayed on webpage to show the result and second one is used to create animation screens in backed process.
How this will help full, suppose we have to create a animation with very high number of move, as in our Snow Fall example, there are number of Flakes are moving with there own speed, so keep them moving, we have to change position of each flake and update it on the canvas, this is quite heavy process to deal with.
So Now instead of updating each Flake directly on our page canvas, we will create a buffer Canvas, where all these changes take place and we just capture a Picture from Buffer canvas after 30ms and display it on our real canvas.
This way our animation will be clear and without flickers. So here is a live example of it.
http://aspspider.info/erishaan8/html5rain/
Here is the code of it:
<!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>
Also if you find this help full, accept as Answer and make it up. o_O
Cheers!!!
这篇关于HTML 5画布的JavaScript雨动画（如何高效，轻松实现！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
