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

时间：2017-04-30 01:52:59

标签： javascript html animation canvas

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

1 个答案:

答案 0 :(得分：0)

我建议......

  • 使用requestAnimationFrame代替间隔。
  • 通过在负高度初始化薄片来摆脱flakeTimer。
  • 摆脱双缓冲区并在一个画布上渲染所有内容。
  • 更新相对于更新之间经过的时间的片状位置。
  • 封装更新和绘制薄片，例如引入Snow类。
  • 使用例如for (var i = 0; i < flakeArray.length; i++)简化for (let flake of flakes)等迭代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>
error_reporting(E_ALL);
ini_set('display_errors', 1);    
include('simple_html_dom.php');
$df = upload('username','password','song.mp3','song.mp3');
$df = json_decode($df, true);

function upload($login,$password,$filename,$file) { 
    $ch = curl_init();
    $postData = array(
        'op' => 'login',
        'login' => $login,
        'password' => $password,
        'returnto' => '/'
    );
    curl_setopt_array($ch, array(
        CURLOPT_URL => 'http://dopefile.pk/login.html',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $postData,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_COOKIESESSION => true,
        CURLOPT_COOKIEJAR => 'cookie.txt'
    ));
    $output = curl_exec($ch);

    curl_setopt($ch, CURLOPT_URL, "http://dopefile.pk/?op=upload");
    $output = curl_exec($ch);
    $html = str_get_html($output);
    $ret1 = $html->find('form[id=uploadfile]'); 
    $ret = $html->find('form[id=uploadfile] input');
    foreach($ret AS $r) { 
        $newPost[$r->name]=$r->value;
    }
    $newPost['file_0'] = '@'.$file.';filename='.$filename;
    curl_setopt_array($ch, array(
        CURLOPT_URL => 'http://dopefile.pk/cgi-bin/upload.cgi?upload_type=file',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => $newPost,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_COOKIESESSION => true,
        CURLOPT_COOKIEJAR => 'cookie.txt'
    ));
    return $output = curl_exec($ch);
}

相关问题
最新问题