怎样用html5 canvas制造页面上的画图板_随笔

首先，你要创建一个HTML页面，其中包含如下canvas标签：

<!doctype html>

<html>

<head>

</head>

</body>

</html>

如果你载入以上代码，当然什么也不会出现。那是因为虽然我们有一个canvas标签，但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。

<head>

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事件，然后执行功能获得画布元素，并绘制几个箱子。非常简单。

result 1(from webappers.com)

这个箱子不错，但你会注意到，画布没有铺满整个浏览器窗口。为了解决这个问题，我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。

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()’ …

现在，如果你调整浏览器的大小，矩形应该如下图所示。

result 2(from webappers.com)

载入图像

大部分游戏都需要动画的子画面，所以我来添加一些图像吧。

首先，你需要图像资源。因为我们要用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 = nullvar 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 = trueredraw()

}

function resize() {

canvas.width = canvas.parentNode.clientWidth

canvas.height = canvas.parentNode.clientHeightredraw()

}

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个奔跑帧。为了把这个子画面做成动画，必须每次绘制一个帧。

子画面动画

可以用drawImage命令的源参数绘制一个帧。事实上，是只绘制源图像的一部分。所以为了绘制这唯一的第一帧，使用允许你指定源图像中的矩形的drawImage的拓展版。因为的猫动画是由6个96 x 96象素大小的帧组成的，可以添加：

ctx.drawImage(img, 0, 0, 96, 54, canvas.width/2 – 48, canvas.height/2 – 48, 96, 54)

这里的关键是起点（0, 0, 96, 54）。这限制被绘制图像为猫动画的第一帧。还设置根据单帧来居中，而不是包含所有6帧的整个图像尺寸。

现在总算有点意思了。为了让图像动起来，我必须追踪要绘制的帧，然后随着时间推进帧数。为此，必须把静止页面做成隔时循环的页面。

按照老方法来做。添加60帧每秒间隔计时器。为了保证只有图像加载后才开始循环动画，要在loaded功能中添加以下命令：

function loaded() {

imageReady = true

setTimeout( update, 1000 / 60 )

}

添加更新后的函数，然后调用redraw：

var frame = 0

function update() {

redraw()frame++

if (frame >= 6) frame = 0

setTimeout( update, 1000 / 60 )

}

当绘制后且帧推进完，计时器就会重置。

下一步，调整绘制图像，使源窗口根据我们想要绘制的那一帧位置来移动（关键是给帧设置的源X位置，是帧乘上帧的大小）。

function redraw() {

ctx.fillStyle = ‘#000000′

ctx.fillRect(0, 0, canvas.width, canvas.height)

if (imageReady)

ctx.drawImage(img, frame*96, 0, 96, 54,

canvas.width/2 – 48, canvas.height/2 – 48, 96, 54)

}

工具/材料

Sublime Text

首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布

然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可

接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要 *** 作的内容都在里面

然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可

接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示

最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下

当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可

以下代码解决你的问题：

机电系统表格.html 文件代码清单如下：

<!doctype html>

<head>

<title>机电系统表格</title>

</head>

<body>

<caption>状态指示系统</caption>

</colgroup>

<tbody>

<tr>

<th scope="col" colspan="2">电动放火风闸</th>

<th scope="col" colspan="2">冷藏压缩机</th>

</tr>

<tr>

<td>1号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>1号水密门综合故障报警</td>

<td>冷藏压缩机过载报警</td>

</tr>

<tr>

<td>1号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>2号水密门综合故障报警</td>

<td>冷藏压缩机过载报警</td>

</tr>

<tr>

<td>2号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>3号水密门综合故障报警</td>

<td>冷藏压缩机过载报警</td>

</tr>

<tr>

<td>2号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>4号水密门综合故障报警</td>

<td>冷藏压缩机过载报警</td>

</tr>

<tr>

<td>3号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>5号水密门综合故障报警</td>

<td>冷藏压缩机过载报警</td>

</tr>

<tr>

<td>3号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>6号水密门综合故障报警</td>

</tr>

<tr>

<td>4号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>7号水密门综合故障报警</td>

<th>主辅机供油单元</th>

</tr>

<tr>

<td>4号机舱送风机风闸开指示</td>

<td>C02灭火装置失电报警</td>

<td>8号水密门综合故障报警</td>

<td>供油单元1号燃油供应泵运行指示</td>

</tr>

<tr>

<td>分油机间送风机风闸开指示</td>

<td>机舱压力水雾灭火系统释放报警</td>

<th>压缩空气系统</th>

<td>供油单元2号燃油供应泵运行指示</td>

</tr>

<tr>

<td>分油机间送风机风闸关指示</td>

<td>机舱压力水雾灭火系统故障报警</td>

<td>1#主空气瓶压力低报警</td>

<td>供油单元1号燃油循环泵运行指示</td>

</tr>

<tr>

<td>分油机间送风机风闸开指示</td>

<th>油水分离器</th>

<td>2#主空气瓶压力低报警</td>

<td>供油单元2号燃油循环泵运行指示</td>

</tr>

<tr>

<td>分油机间送风机风闸关指示</td>

<td>油水分离器综合故障报警</td>

<td>工作空气瓶压力低报警</td>

<td>三通转换阀燃油遥控指示</td>

</tr>

<tr>

<td>油水分离器运行指示</td>

<td>三通转换阀柴油遥控指示</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

electromechanical-systems.css 文件代码清单如下：

body {

background: #000000

}

table {

border: 1px solid #ffffff

border-collapse: collapse

background: #000000

font-size: 0.9em

_font-size: 13px

color: #ffffff

}

#col2, #col5, #col8, #col11 {

width: 220px /* 修改装置名称列宽度 */

}

table th {

border: 1px solid #ffffff

color: green

}

table td {

_border-right: 1px solid #ffffff

border-left: 1px solid #ffffff

}

table tr td img {

display: block

margin: 0 auto

width: 10px /* 修改图片宽度 */

height: 10px /* 修改图片高度 */

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6170612.html

怎样用html5 canvas制造页面上的画图板

发表评论

评论列表（0条）