9 javascript html5 animation html5-canvas
我在画布上尝试了这两个并没有显示,我也怀疑它是否有效:/.我试图让屏幕上的雨下雨.想知道这样做最有效的方法是什么.我是动画的初学者,非常感谢帮助.
我怀疑创建一个下雨对象是最好的,每个都有从屏幕上下来的质量然后到达顶部然后是一个带有它们的数组...可能有随机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();
}
Ish*_*gra 16
您的回答是,这场雪雨是使用纯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
干杯!!!
| 归档时间： |
|
| 查看次数： |
8736 次 |
| 最近记录： |