Fatal编程技术网
  • javascript/
  • Javascript 使用HMTL5 canvas-Can'；我似乎没有添加任何对象

Javascript 使用HMTL5 canvas-Can'；我似乎没有添加任何对象

javascript html animation canvas

Javascript 使用HMTL5 canvas-Can'；我似乎没有添加任何对象,javascript,html,animation,canvas,Javascript,Html,Animation,Canvas,对于一个项目，我需要获取这两个代码块并修改它们以创建一个小动画。Javascript文档创建了一个背景色，并创建了像雪花一样的白色矩形。HTML文档创建画布 我使用过HTML画布并制作了一些超基本的动画，但我遇到了一个障碍。当我尝试向这个添加内容时，它不会显示。我想做的就是添加一些文本，然后在画布上设置动画，以及其他一些非常基本的东西 我尝试过向html文档的脚本部分添加文本，就像我以前做过几次一样，但它似乎什么都没做 知道我做错了什么吗 （我主修动画，因此我为自己的无知提前道歉；脚本不是我的专

对于一个项目，我需要获取这两个代码块并修改它们以创建一个小动画。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>


基本动画
正文，td，th{
字体系列：Arial，“富兰克林哥特式书籍”，无衬线；
}
具有双缓冲区的动画
不支持画布
var canvas=document.getElementById（“天空”）；
var ctx=canvas.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.strokeText（“你好，世界”，10,50）；
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();
}

window.onload=init；
var=null；
var-context=null；
var bufferCanvas=null；
var bufferCanvasCtx=null；
变量数组=[]；
var-flakeTimer=null；
var maxFlakes=200；
函数片（）{
this.x=Math.round（Math.random（）*context.canvas.width）；
y=-10；
this.drift=Math.random（）；
this.speed=Math.round（Math.random（）*5）+1；
this.width=（Math.random（）*5）+2；
this.height=this.width；
}
函数init（）{
canvas=document.getElementById（'Sky'）；
context=canvas.getContext（“2d”）；
bufferCanvas=document.createElement（“画布”）；
bufferCanvasCtx=bufferCanvas.getContext（“2d”）；
bufferCanvasCtx.canvas.width=context.canvas.width；
bufferCanvasCtx.canvas.height=context.canvas.height；
//初始化矩形
flakeTimer=设置间隔（addFlake，200）；
Draw（）；
设置间隔（动画，30）；
}
函数addFlake（）{
flakeArray[flakeArray.length]=新的Flake（）；
if（flakeArray.length==maxFlakes）
清除间隔（计时器）；
}
函数blank（）{
bufferCanvasCtx.fillStyle=“#330033”；
bufferCanvasCtx.fillRect（0,0，bufferCanvasCtx.canvas.width，bufferCanvasCtx.canvas.height）；
}
函数animate（）{
更新（）；
Draw（）；
}
函数更新（）{
对于（变量i=0；icontext.canvas.height）
数组[i].y=-5；
flakeArray[i].x+=flakeArray[i].漂移；
if（flakeArray[i].x>context.canvas.width）
数组[i].x=0；
}
}
}
函数绘图（）{
context.save（）；
/*
//创建剪裁区域
bufferCanvasCtx.beginPath（）；
bufferCanvasCtx.fillStyle=“黑色”；
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（）；
*/
空白（）；
对于（变量i=0；i
我建议

  • 使用
    requestAnimationFrame
    而不是间隔
  • 通过在负高度初始化薄片，摆脱薄片计时器
  • 摆脱双缓冲区，在一个画布上渲染所有内容
  • 相对于更新之间经过的时间更新薄片位置
  • 封装雪花的更新和绘制，例如通过引入
    Snow
    类
  • 简化迭代，例如为（var i=0；i使用（让雪花成片）
  • 减少对全局变量的依赖，将画布上下文和维度作为参数传递
功能片（x、y、漂移、速度、大小）{
这个.x=x；
这个。y=y；
这个。漂移=漂移；
速度=速度；
这个。大小=大小；
}
班级雪{
构造函数（）{
this.flakes=[]；
}
更新（dt、宽度、高度）{
为了（让这片雪花剥落，剥落）{
flake.y+=flake.speed*dt；
如果（薄片y>高度）{
flake.y=-flake.size；
}
flake.x+=flake.drift*dt；
如果（薄片x>宽度）{
flake.x=-flake.size；
}
}
}
抽签（ctx）{
ctx.fillStyle=“白色”；
为了（让这片雪花剥落，剥落）{
ctx.fillRect（flake.x，flake.y，flake.size，flake.size）；
}
}
}
让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
让雪=新雪（）；
//添加薄片：
对于（设i=0；i<200；++i）{
雪花。雪花。推（新雪花）(
Math.round（Math.random（）*canvas.width），
-i*200，
Math.random（）*0.05，
Math.random（）*0.25+0.05，
Math.random（）*5+2）
);
}
//制作动画：
让last=performance.now（）；
功能帧（时间）{
//清晰背景：
ctx.fillStyle=“#330033”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//更新和渲染雪：
更新（time-last，canvas.width，canvas.height）；
雪。画（ctx）；
//渲染文本：
ctx.strokeStyle=“白色”；
ctx.font=“30px Arial”；
ctx.strokeText（“你好，世界”，10，50）；
请求动画帧（帧）；
最后一次=时间；
}
请求动画帧（帧）

画布动画不需要双缓冲区。不过，动画中必须使用雪景效果。