使用HMTL5 canvas创建动画-似乎无法添加任何对象

Question

对于一个项目，我需要使用这两个代码块并对其进行修改以创建一个小动画。 Javascript文档创建背景颜色，并创建像白色矩形一样掉落，像雪一样的颜色。 HTML文档将创建画布。

我已经使用HTML画布并做了一些超级基本的动画，但是在这里遇到了障碍。 当我尝试向其中添加内容时，它没有显示。 我要做的就是添加一些文本，然后在画布和其他一些非常基本的东西上设置动画。

我尝试将文本添加到html文档的脚本部分中，就像我之前做过几次一样，但是似乎什么也没做。

知道我在做什么错吗？

（我是动画专业的学生，所以我为自己的无知向您道歉；脚本不是我的专长）

html文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Basic Animation</title>
<script type="text/javascript" src="buffer-script2.js"></script>
<style type="text/css">
body,td,th {
font-family: Arial, "Franklin Gothic Book", sans-serif;
}
</style>
</head>

<body>
<h2>An Animation with Double Buffer</h2>
  <canvas id="Sky" width="600" height="300">
    Canvas not supported
  </canvas>

<script>
var canvas = document.getElementById("Sky");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

</body>
</html>

Javascript文件：

window.onload = init;

var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200;

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() * 5) + 2;
this.height = this.width;
}

function init() {
canvas = document.getElementById('Sky');
context = canvas.getContext("2d");

bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;

// initialize the rects
flakeTimer = setInterval(addFlake, 200);

Draw();

setInterval(animate, 30);
}

function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
    clearInterval(flakeTimer);
}

function blank() {
bufferCanvasCtx.fillStyle = "#330033";
bufferCanvasCtx.fillRect(0,0,bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}

function animate() {
Update();
Draw();
}

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 Draw(){
context.save();
/*
// create a clipping region
bufferCanvasCtx.beginPath();
bufferCanvasCtx.fillStyle="black";
bufferCanvasCtx.fillRect(0,0,bufferCanvas.width,bufferCanvas.height);
bufferCanvasCtx.arc(bufferCanvas.width/2,bufferCanvas.height/2,bufferCanvas.height/3,0,2*Math.PI);
bufferCanvasCtx.clip();
*/
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);
}

// copy the entire rendered image from the buffer canvas to the visible one
context.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);
context.restore();
}

Answer 1

我建议...

使用requestAnimationFrame而不是间隔。
通过将碎片初始化为负高度来摆脱flakeTimer 。
摆脱双重缓冲区，并在一张画布上呈现所有内容。
相对于两次更新之间经过的时间来更新薄片位置。
封装薄片的更新和绘制，例如通过引入Snow类。
通过使用例如for (let flake of flakes)简化for (var i = 0; i < flakeArray.length; i++)的迭代。
减少对全局变量的依赖，将画布上下文和尺寸作为参数传递。

 function Flake(x, y, drift, speed, size) { this.x = x; this.y = y; this.drift = drift; this.speed = speed; this.size = size; } class Snow { constructor() { this.flakes = []; } update(dt, width, height) { for (let flake of this.flakes) { flake.y += flake.speed * dt; if (flake.y > height) { flake.y = -flake.size; } flake.x += flake.drift * dt; if (flake.x > width) { flake.x = -flake.size; } } } draw(ctx) { ctx.fillStyle = "white"; for (let flake of this.flakes) { ctx.fillRect(flake.x, flake.y, flake.size, flake.size); } } } let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); let snow = new Snow(); // Add flakes: for (let i = 0; i < 200; ++i) { snow.flakes.push(new Flake( Math.round(Math.random() * canvas.width), -i * 200, Math.random() * 0.05, Math.random() * 0.25 + 0.05, Math.random() * 5 + 2) ); } // Animate: let last = performance.now(); function frame(time) { // Clear background: ctx.fillStyle = "#330033"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update & render snow: snow.update(time - last, canvas.width, canvas.height); snow.draw(ctx); // Render text: ctx.strokeStyle = "white"; ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); requestAnimationFrame(frame); last = time; } requestAnimationFrame(frame);

 <canvas id="canvas" width="600" height="300"></canvas>

使用HMTL5 canvas创建动画-似乎无法添加任何对象

问题描述

1 个解决方案

解决方案1
0 2017-04-30 13:16:48

使用HMTL5 canvas创建动画-似乎无法添加任何对象

问题描述

1 个解决方案

解决方案1 0 2017-04-30 13:16:48

解决方案1
0 2017-04-30 13:16:48