HTML5高级程序设计 (2).pdf

《HTML5高级程序设计 (2).pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、22第2章CanvasAPI第2章CanvasAPI2在本章中，我们将探索如何使用HTML5的CanvasAPI。CanvasAPI很酷，可以通过它来动态生成和展示图形、图表、图像以及动画。本章将使用渲染API（renderingAPI）的基本功能来创建一幅可以放大缩小并自适应浏览器环境的图。还会演示如何基于用户输入来动态创建图像，生成热点图。当然，我们也会提醒你在使用HTML5Canvas时需要注意的问题，并且分享解决这些问题的方法。本章只涉及了最基本的图形知识，因此，你大可不必担心学不会而跳过本章。来吧，让我们一起来感受HTML5中这个强大的特性吧。2.1HTML5Can

2、vas概述关于HTML5CanvasAPI完全可以写一本书（还不会是一本很薄的书）。由于只有一章的篇幅，所以我们将讨论API中那些我们认为是最常用的功能。2.1.1历史Canvas的概念最初是由苹果公司提出的，用于在MacOSXWebKit中创建控制板部件（dashboardwidget）。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG（ScalableVectorGraphics，可伸缩矢量图形）插件，或者只有IE才支持的VML（VectorMarkupLanguage，矢量标记语言），以及其他一些稀奇古怪的JavaSc

3、ript技巧。假设我们要在没有canvas元素的条件下绘制一条对角线——听起来似乎很简单，但实际上如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5Canvas能够提供这样的功能，对浏览器端来说此功能非常有用，因此Canvas被纳入了HTML5规范。起初，苹果公司曾暗示可能会为WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组）草案中的Canvas规范申请知识产权，这在当时引起了一些2.1HTML5Canvas概述23Web标准化追随者的关注。不过，苹果公司最终还是按照W3C的

4、免版税专利权许可条款公开了1其专利。SVG和CANVAS对比2“Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG图像那样可以被放大缩小。此外，用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间——这3点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放，并且支持点击检测（能4检测到鼠标点击了图像上的哪个点）。既然如此，为什么WHATWG的HTML5规范不使用SVG呢？尽管Canvas有明显的不足，5但HTMLCanvasAPI有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其

5、他编程语言现有的优秀二维绘图API的基础上实现6CanvasAPI相对来说比较简单。毕竟，二鸟在林不如一鸟在手。”7——Peter2.1.2canvas是什么8在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像9素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。代码清单2-1是可放到HTML页面中的最基本的canvas元素。10代码清单2-1基本的canvas元素1124第2章CanvasAPI在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。

6、可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。大多数主流操作系统和框架支持的二维绘制操作，HTML5CanvasAPI都支持。如果你在近年来曾经有过二维图像编程的经验，那么会对HTML5Canvasx轴API感觉非常顺手，因为这个API就是参照既有系统设计的。0,016,0如果没有这方面经验，则会发现与这么多年来一直使用的图片加CSS开发Web图形的方式比起来，Canvas的渲染系统有多么强大。使用canvas编程，首先要获取其上下文（context）。接着图2-1canvas中的x、y坐标轴y在上下文中执行动作，最后将这些动作应用到上下文中。可

7、以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。0,1616,162.1.3canvas坐标如图2-1所示，canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。2.1.4什么情况下不用canvas尽管canvas元素功能非常强大，用处也很多，但在某些情况下，如果其他元素已经够用了，就不应该再使用canvas元素。例如，用canvas元素在HTML页面中动态绘制所