• 首页

    • 如何用HTML5 Canvas制作子画面动画

    如题所述

    推荐答案   推荐于2016-10-07
    　　为了用DOM做2D游戏，你基本上要动态地调整元素风格，以便在页面上移动它。虽然有些时候DOM修改是很好的，但这一次我将重点介绍使用HTML5 Canvas来制作图像，因为对于现代浏览器，它是最灵活的。
    　　页面设置
    　　首先，你要创建一个HTML页面，其中包含如下canvas标签：
    　　<!doctype html>
    　　<html>
    　　<head>
    　　<title></title>
    　　</head>
    　　<body style=’position: absolute; padding:0; margin:0; height: 100%; width:100%’>
    　　<canvas id=”gameCanvas”></canvas>
    　　</body>
    　　</html>
    　　如果你载入以上代码，当然什么也不会出现。那是因为虽然我们有一个canvas标签，但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。
    　　<head>
    　　<title></title>
    　　<script type=’text/javascript’>
    　　var canvas = null;
    　　function onload() {
    　　canvas = document.getElementById(‘gameCanvas’);
    　　var ctx = canvas.getContext(“2d”);
    　　ctx.fillStyle = ‘#000000′;
    　　ctx.fillRect(0, 0, canvas.width, canvas.height);
    　　ctx.fillStyle = ‘#333333′;
    　　ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3,
    　　canvas.height / 3);
    　　}
    　　</script>
    　　</head>
    　　<body onload=’onload()’ …
    　　在这个例子中，我已经在body标签中添加了一个onload事件，然后执行功能获得画布元素，并绘制几个箱子。非常简单。

    　　这个箱子不错，但你会注意到，画布没有铺满整个浏览器窗口。为了解决这个问题，我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。
    　　var canvas = null;
    　　function onload() {
    　　canvas = document.getElementById(‘gameCanvas’);
    　　canvas.width = canvas.parentNode.clientWidth;
    　　canvas.height = canvas.parentNode.clientHeight;
    　　…
    　　加载后，你会看到画布铺满整个屏幕了。太好了。
    　　再进一步，如果浏览器窗口大小是由用户调整的，我们还要重置画布的尺寸。
    　　var canvas = null;
    　　function onload() {
    　　canvas = document.getElementById(‘gameCanvas’);
    　　resize();
    　　}
    　　function resize() {
    　　canvas.width = canvas.parentNode.clientWidth;
    　　canvas.height = canvas.parentNode.clientHeight;
    　　var ctx = canvas.getContext(“2d”);
    　　ctx.fillStyle = ‘#000000′;
    　　ctx.fillRect(0, 0, canvas.width, canvas.height);
    　　ctx.fillStyle = ‘#333333′;
    　　ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
    　　}
    　　添加onresize命令到body标签。
    　　<body onresize=’resize()’ …
    　　现在，如果你调整浏览器的大小，矩形应该如下图所示。

    　　载入图像
    　　大部分游戏都需要动画的子画面，所以我来添加一些图像吧。
    　　首先，你需要图像资源。因为我们要用javascript绘制它，所以我觉得先声明图像然后设置它的src属性为你想载入的图像的URL，比较合理。
    　　var img = null;
    　　function onload() {
    　　…
    　　img = new Image();
    　　img.src = ‘simba.png’;
    　　}
    　　然后你可以通过添加这个到resize方法中来绘制图像：
    　　ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));
    　　如果你重新载入页面后，在大部分情况下，你会看到图像出现了。不过我说的是大部分情况下，因为这取决于你的机器跑得有多快、浏览器是否已经缓存了图像。那是因为resize方法的调用时间介于你开始载入图像（设置它的src属性）的时间到浏览器准备好的时间之间。对于一两张图像，这个方法可能不错，但当你的游戏开始变大时，你就必须等到所有图像加载完才能执行活动。
    　　给图像添加一个通知监听器，这样当图像准备就绪时你就会收到回叫信号。我得重新整理一下，以下是更新过的代码：
    　　var canvas = null;
    　　var img = null; var ctx = null;
    　　var imageReady = false;
    　　function onload() {
    　　canvas = document.getElementById(‘gameCanvas’);
    　　ctx = canvas.getContext(“2d”);
    　　img = new Image();
    　　img.src = ‘images/simba.png’;
    　　img.onload = loaded();
    　　resize();
    　　}
    　　function loaded() {
    　　imageReady = true; redraw();
    　　}
    　　function resize() {
    　　canvas.width = canvas.parentNode.clientWidth;
    　　canvas.height = canvas.parentNode.clientHeight; redraw();
    　　}
    　　function redraw() {
    　　ctx.fillStyle = ‘#000000′;
    　　ctx.fillRect(0, 0, canvas.width, canvas.height);
    　　if (imageReady)
    　　ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));
    　　}
    　　结果应该是：

    　　这个图像显示了一只吸血鬼猫（好吧，是我自己觉得像）的6个奔跑帧。为了把这个子画面做成动画，我们必须每次绘制一个帧。
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2015-04-17
    去w3cschoocl 看看

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    相关问题
    如何制作html5的动画效果？
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画
    如何用HTML5 Canvas制作子画面动画

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网