HTML5高级程序设计.pdfVIP

22 第2 章 Canvas API 第2 章 Canvas API 2 在本章中，我们将探索如何使用HTML5 的Canvas API。Canvas API 很酷，可以通过它 来动态生成和展示图形、图表、图像以及动画。本章将使用渲染API （rendering API ） 的基本功能来创建一幅可以放大缩小并自适应浏览器环境的图。还会演示如何基于用户输入来动 态创建图像，生成热点图。当然 ，我们也会提醒你在使用HTML5 Canvas 时需要注意的问题 ，并 且分享解决这些问题的方法。 本章只涉及了最基本的图形知识，因此 ，你大可不必担心学不会而跳过本章。来吧，让我们 一起来感受HTML5 中这个强大的特性吧。 2.1 HTML5 Canvas 概述 关于HTML5 Canvas API 完全可以写一本书（还不会是一本很薄的书）。由于只有一章的篇 幅，所以我们将讨论API 中那些我们认为是最常用的功能。 2.1.1 历史 Canvas 的概念最初是由苹果公司提出的，用于在 Mac OS X WebKit 中创建控制板部件 （dashboard widget ）。在Canvas 出现之前，开发人员若要在浏览器中使用绘图API ，只能使用Adobe 的Flash 和SVG （Scalable Vector Graphics ，可伸缩矢量图形）插件，或者只有IE 才支持的VML （Vector Markup Language ，矢量标记语言），以及其他一些稀奇古怪的JavaScript 技巧。 假设我们要在没有canvas 元素的条件下绘制一条对角线——听起来似乎很简单，但实际上 如果没有一套二维绘图API 的话，这会是一项相当复杂的工作。HTML5 Canvas 能够提供这样的 功能，对浏览器端来说此功能非常有用 ，因此Canvas 被纳入了HTML5 规范。 起初 ，苹果公司曾暗示可能会为WHATWG （Web Hypertext Application Technology Working Group ，Web 超文本应用技术工作组）草案中的Canvas 规范申请知识产权，这在当时引起了一些 2.1 HTML5 Canvas 概述 23 Web 标准化追随者的关注。不过，苹果公司最终还是按照W3C 的免版税专利权许可条款公开了 1 其专利。 SVG 和CANVAS 对比 2 “ Canvas 本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG 图像那样可以 被放大缩小。此外，用 Canvas 绘制出来的对象不属于页面 DOM 结构或者任何命名空间——这 3 点被认为是一个缺陷。SVG 图像却可以在不同的分辨率下流畅地缩放 ，并且支持点击检测（能 4 检测到鼠标点击了图像上的哪个点 ）。 既然如此，为什么WHATWG 的HTML5 规范不使用SVG 呢？尽管Canvas 有明显的不足， 5 但HTML Canvas API 有两方面优势可以弥补：首先 ，不需要将所绘制图像中的每个图元当做对 象存储，因此执行性能非常好 ；其次，在其他编程语言现有的优秀二维绘图 API 的基础上实现 6 Canvas API 相对来说比较简单。毕竟 ，二鸟在林不如一鸟在手。” 7