【第1章基础知识】1.10 离屏 canvas

最新推荐文章于 2025-05-29 15:19:30 发布

ncj393437906

最新推荐文章于 2025-05-29 15:19:30 发布

阅读量476

点赞数 4

CC 4.0 BY-SA版权

分类专栏：《HTML5 Canvas核心技术图形、动画与游戏开发》文章标签： Canvas

本文链接：https://blog.youkuaiyun.com/ncj393437906/article/details/148260474

《HTML5 Canvas核心技术图形、动画与游戏开发》专栏收录该内容

41 篇文章

订阅专栏

文章目录

前言
更新后的时钟
关键代码

前言

Canvas 技术的另一项重要功能就是可以创建并操作离屏 canvas。举例来说，在大多数情况下，都可以把背景存储在一个或多个离屏 canvas 之中，并将这些离屏 canvas 中的某一部分复制到屏幕上，以此来大幅提高应用程序的性能。

离屏 canvas 的另一个用途就是制作我们在上一节提到的那个时钟程序。那个应用程序向你展示了一种通用的解决方案，它需要用户通过交互界面将程序的显示方式从 canvas 切换为图像。不过，像时钟这样的应用程序，最好还是能在不需要用户干预的情况下，于幕后完成显示模式的切换。

更新后的时钟

更新后的时钟每秒钟都会将时钟绘制到离屏 canvas 之中，然后将该 canvas 的数据地址设置为 img 的 src 属性值，于是就形成了一副反映离屏 canvas 内容变化的动画图像。

在这里插入图片描述

关键代码

请注意 HTML 代码中 canvas 元素的 CSS 设定：canvas是不可见的，因为其 display 属性被设置为 none 了。这样的话，这个不可见的 canvas 就变成一个离屏 canvas。实际开发中离屏 canvas 不是这样设置的。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>1-4-一个基本的时钟程序</title>
		<style>
			body {
				background: #ddd;
			}
			#canvas {
				display: none;
			}
			#snapshotImageElement {
				position: absolute;
				left: 10px;
				margin: 20px;
				border: thin solid #aaa;
			}
		</style>
	</head>

	<script>
		function updateClockImage() {
			snapshotImageElement.src = cavans.toDataURL()
		}
	</script>
</html>