Canvas技术的另一项重要功能就是可以创建并操作离屏canvas。举例来说，在大多数情况下，都可以把背景存储在一个或多个离屏canvas之中，并将这些离屏canvas中的某一部分复制到屏幕上，以此来大幅提高应用程序的性能。
离屏canvas的另一个用途就是制作我们在上一节中提到的那个钟表程序。那个应用程序向你展示了一种通用的解决方案，它需要用户通过交互界面将程序的显示方式从canvas切换为图像。不过，像时钟这样的应用程序，最好还是能在不需要用户干预的情况下，于幕后完成显示模式的切换。
图1-20之中所显示的是更新之后的时钟程序。应用程序每秒钟都会将时钟绘制到离屏canvas之中，然后将该canvas的数据地址设置为图形元素的src属性值，于是就形成了一幅反映离屏canvas内容变化的动画图像。有关canvas数据地址的更多信息，请参阅本书1.9节。
图1-20这个应用程序的HTML代码列在了程序清单1-13之中。
图1-20 使用离屏canvas 来绘制时钟图像
程序清单1-13 以图像方式实现的时钟程序（HTML代码）
<!DOCTYPE html>
<head>
<title>Image Clock</title>
<style>
body {
background: #dddddd;
}
#canvas {
display: none;
}
#snapshotImageElement {
position: absolute;
left: 10px;
margin: 20px;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<img id='snapshotImageElement'/>
<canvas id='canvas' width='400' height='400'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
请注意HTML代码中canvas元素的CSS设定：canvas是不可见的，因为其display属性被设置为none了。这样的话，这个不可见的canvas就变成一个离屏canvas了。也可以使用编程的方式来创建离屏canvas，像是这样：
var offscreen = document.createElement('canvas');.
图1-20这个应用程序里面与离屏canvas有关的JavaScript代码，列在了程序清单1-14之中。
ICP经营许可证：鄂B2-20080078
（于2003年首获许可证:鄂B2－20030029）
鄂公网安备：420100003343号
© 2002-2025 武汉制信科技有限公司 版权所有
投诉举报电话：027-87592219
购买
在线阅读
需求中心
AI助手
联系我们
返回顶部