HTML5高级程序设计2

22第2章CanvasAPI2CanvasAPI本章中，我们将探索如何使用HTML5的CanvasAPI。CanvasAPI很酷，可以通过它来动态生成和展示图形、图表、图像以及动画。本章将使用渲染API（renderingAPI）的基本功能来创建一幅可以放大缩小并自适应浏览器环境的图。还会演示如何基于用户输入来动态创建图像，生成热点图。当然，我们也会提醒你在使用HTML5Canvas时需要注意的问题，并且分享解决这些问题的方法。本章只涉及了最基本的图形知识，因此，你大可不必担心学不会而跳过本章。来吧，让我们一起来感受HTML5中这个强大的特性吧。2.1HTML5Canvas概述关于HTML5CanvasAPI完全可以写一本书（还不会是一本很薄的书）。由于只有一章的篇幅，所以我们将讨论API中那些我们认为是最常用的功能。2.1.1历史Canvas的概念最初是由苹果公司提出的，用于在MacOSXWebKit中创建控制板部件（dashboardwidget）。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG（ScalableVectorGraphics，可伸缩矢量图形）插件，或者只有IE才支持的VML（VectorMarkupLanguage，矢量标记语言），以及其他一些稀奇古怪的JavaScript技巧。假设我们要在没有canvas元素的条件下绘制一条对角线——听起来似乎很简单，但实际上如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5Canvas能够提供这样的功能，对浏览器端来说此功能非常有用，因此Canvas被纳入了HTML5规范。起初，苹果公司曾暗示可能会为WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组）草案中的Canvas规范申请知识产权，这在当时引起了一些在第2章(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux2.1HTML5Canvas概述231234691175810Web标准化追随者的关注。不过，苹果公司最终还是按照W3C的免版税专利权许可条款公开了其专利。SVG和CANVAS对比“Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG图像那样可以被放大缩小。此外，用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间——这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放，并且支持点击检测（能检测到鼠标点击了图像上的哪个点）。既然如此，为什么WHATWG的HTML5规范不使用SVG呢？尽管Canvas有明显的不足，但HTMLCanvasAPI有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图API的基础上实现CanvasAPI相对来说比较简单。毕竟，二鸟在林不如一鸟在手。”——Peter2.1.2canvas是什么在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。代码清单2-1是可放到HTML页面中的最基本的canvas元素。代码清单2-1基本的canvas元素canvas/canvas(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux24第2章CanvasAPI在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。大多数主流操作系统和框架支持的二维绘制操作，HTML5CanvasAPI都支持。如果你在近年来曾经有过二维图像编程的经验，那么会对HTML5CanvasAPI感觉非常顺手，因为这个API就是参照既有系统设计的。如果没有这方面经验，则会发现与这么多年来一直使用的图片加CSS开发Web图形的方式比起来，Canvas的渲染系统有多么强大。使用canvas编程，首先要获取其上下文（context）。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。2.1.3canvas坐标如图2-1所示，canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。2.1.4什么情况下不用canvas尽管canvas元素功能非常强大，用处也很多，但在某些情况下，如果其他元素已经够用了，就不应该再使用canvas元素。例如，用canvas元素在HTML页面中动态绘制所有不同的标题，就不如直接使用标题样式标签（H1、H2等），它们所实现的效果是一样的。图2-1canvas中的x、y坐标x轴y轴0,016,00,1616,16(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux2.1HTML5Canvas概述2512346911758102.1.5替代内容访问页面的时候，如果浏览器不支持canvas元素，或者不支持HTML5CanvasAPI中的某些特性，那么开发人员最好提供一份替代代码（2.1.7节中的表2-1详细介绍了浏览器对canvas的支持情况）。例如，开发人员可以通过一张替代图片或者一些说明性的文字告诉访问者，使用最新的浏览器可以获得更佳的浏览效果。代码清单2-2展示了如何在canvas中指定替代文本，当浏览器不支持canvas的时候会显示这些替代内容。代码清单2-2在canvas元素中使用替代内容canvasUpdateyourbrowsertoenjoycanvas!/canvas除了上面代码中的文本外，同样还可以使用图片，不论是文本还是图片都会在浏览器不支持canvas元素的情况下显示出来。canvas元素的可访问性怎么样“提供替代图像或替代文本引出了可访问性这个话题——很遗憾，这是HTML5Canvas规范中明显的缺陷。例如，没有一种原生方法能够自动为已插入到canvas中的图片生成用于替换的文字说明。同样，也没有原生方法可以生成替代文字以匹配由CanvasTextAPI动态生成的文字。在写本书的时候，暂时还没有其他方法可以处理canvas中动态生成的内容，不过已经有工作组开始着手这方面的设计了。让我们一起期待吧。”——Peter(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux26第2章CanvasAPI2.1.6CSS和canvas同大多数HTML元素一样，canvas元素也可以通过应用CSS的方式来增加边框，设置内边距、外边距等，而且一些CSS属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，其样式默认同canvas元素本身是一样的。此外，在canvas中为context设置属性同样要遵从CSS语法。例如，对context应用颜色和字体样式，跟在任何HTML和CSS文档中使用的语法完全一样。2.1.7浏览器对HTML5Canvas的支持除了InternetExplorer以外，其他所有浏览器现在都提供对HTML5Canvas的支持。不过，随后我们会列出一部分还没有被普遍支持的规范，CanvasTextAPI就是其中之一，但是作为一个整体，HTML5Canvas规范已经非常成熟，不会有特别大的改动了。从表2-1中可以看到，写本书的时候，已经有很多浏览器支持HTML5Canvas了。表2-1浏览器对HTML5Canvas的支持浏览器支持情况Chrome从1.0版本开始支持Firefox从1.5版本开始支持InternetExplorer不支持Opera从9.0版本开始支持Safari从1.3版本开始支持从上面的表格中可以看出，在所有浏览器中，只有InternetExplorer不支持HTML5Canvas。如果需要在InternetExplorer中使用canvas，可以选择使用名为explorercanvas的开源项目（）。使用explorercanvas时，需要先判断当前浏览器是否是(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux2.2使用HTML5CanvasAPI271234691175810InternetExplorer，如果是则在页面中嵌入script标签来加载explorercanvas。写法如下：head!--[ifIE]scriptsrc=excanvas.js/script![endif]--/head开发者迫切希望Canvas可以受到广泛支持，因此不断有项目启动来尝试解决老浏览器或者非标准浏览器不支持Canvas的问题。微软已经宣布InternetExplorer9将支持canvas，因此，所有主流浏览器都支持canvas已经指日可待了。由于各家浏览器对canvas的支持程度有差异，所以最好在使用API之前，先测试一下HTML5Canvas是否被支持。2.2.1节会讲解怎样通过代码来检测浏览器支持Canvas的情况。2.2使用HTML5CanvasAPI本节将深入探讨HTML5CanvasAPI。为此，我们将使用各种HTML5CanvasAPI创建一幅类似于LOGO的图像，图像是森林场景，有树，还有适合长跑比赛的美丽跑道。虽然这个示例从平面设计的角度来看毫无竞争力，但却可以合理演示HTML5Canvas的各种功能。2.2.1检测浏览器支持情况在创建HTML5canvas元素之前，首先要确保浏览器能够支持它。如果不支持，你就要为那些古董级浏览器提供一些替代文字。代码清单2-3就是检测浏览器支持情况的一种方法。代码清单2-3检测浏览器支持情况try{document.createElement(canvas).getContext(2d);document.getElementById(support).innerHTML=HTML5Canvasissupportedinyourbrowser.;}catch(e){document.getElementById(support).innerHTML=HTML5Canvasisnotsupported(LinuxIDC.com)Ubuntu,Fedora,SUSEITLinux28第2章CanvasAPIinyourbrowser.;}上面的代码试图创建一个canvas对象，并且获取其上下文。如果发生错误，则可以捕获错误，进而得知该浏览器不支持canvas。页面中预先放入了ID为support的元素，通过以适当的信息更新该元素的内容，可以反映出浏览器的支持情况。以上示例代码能判断浏览器是否支持canvas元素，但不会判断具体支持canvas的哪些特性。写本书的时候，示例中使用的API已经很稳定并且各浏览器也都提供了很好的支持，所以通常不必担心这个问题。此外，希望开发人员能够像代码清单2-3一样为canvas元素提供备用显示内容。2.2.2在页面中加入canvas在HTML页面中插入canvas元素非常直观。代码清单2-4就是一段可以被插入到HTML页面中的canvas代码。代码清单2-4canvas元素canvasheight=200width=200/canvas以上代码会在页面上显示出一块200×200像素