安全方面
从安全角度来看，通过其他域的脚本访问Canvas及其内容(像素)存在着很大隐患。
宁波网站建设规范将此称为信息泄露(informationleakage),并试图用origin-clean标志位来应付这种情况。
origin-clean的概念分为两个部分，主要基于在运行的脚本中调用特定的方法和属性，将origin-cleanflag从true设成false。在这种情况下若调用getImageData()或todataURL()，脚本将拋出一个SECURITY_ERR异常并中止。
主角为drawlmage()、fillStyle及strokeStyle。每当有来自其他域的图像或视频、或者canvas元素并非，它们都将重定义origin-clean标志位。
假设变量image引用了来自http://www.whatwg.org/images/logo的WHATWG的LOGO,但脚本并非在WHATWG的服务器上运行，之后调用drawlmage()函数时origin-clean会被设为false:
context.drawlmage(image,0,0);
若将该LOGO作为图案，使用fillStyle和strokeStyle时将会产生同样的结果---origin-clean被设为false:
varpat=context.createPattern(image);context.fillStyle=pat;context.strokeStyle=pat;从这时起，每次调用getImageData()或toDataURL()都会导致脚本终止。
在Firefox浏览器中，这一机制运行起来更为严格：所有用file://协议加载的图像都被归类为非origin-dean。那么在本章中它意味着什么呢？意味着所有右下角带服务器标志的图像都无法通过本地file://路径在Firefox中打开，它们仅在位于web服务器上时才会显7K。
若你不想安装Apache服务器.但能够使用Python,你可以用一行代码在当前@目录启动一个位于端口0的基本的Web服务器：
python-mSimpleHTTPServerV
在浏览器中通过http://localhost:0可访问该目录的内容。胃浏览器支持Firefox、Safari、Chrome以及Opera的当前版本都支持Canvas规范中的大部分内容。
如你需要用〖E来观看Canvas,请使用为Canvas提供了硬件加速支持的IE9。它让诸如Google的ChromeFramePlugin(http://code.google.com/chrome/chromeframe)或JavaScript中间件explorercanvas这类IE8工作区插件成为历史。
如你所料，不同浏览器在Canvas的支持程度上略有差异。一个用来判断支持程度的有用资源是PhilipTay丨or的CanvasTestsuite，它提供了将近个测试以及主流浏览器的测试结果列表，详见：http://philip.html5.org/tests/canvas/suite/tests。
如你在之前的屏幕截图中所见，本章中的所有案例都在Firefox中创建。截至写下此文时，除了字体章节的小写字体问题之外，其他案例都在Firefox下工作正常。Safari、Opera、IE9及Chrome也能很好地运行我们的案例——相对来说Safari及Opera比IE9和chrome表现得更优秀。
鉴于浏览器的每次更新都可能导致Canvas的实现过程得到改善，因此我们在合作网站的Canvas目录下提供了本书中案例在不同浏览器下实现的定期细节更新：
http://html5.komplett.cc/code/chap_canvas/index_en.html更多链接作为Canvas探索之旅的良好开始，你可以访问一个被称为“使用HTML5〈canVas〉
元素的应用程序、游戏工具及教程之家(Hometoapplications,games,toolsandtutorialsthatusetheHTML5〈canvas〉ele-ment)”的网站(http://www.canvasdemos.coni)，此网站提供了许多有趣的链接。同样值得一看的是Mozilla开发中心一一个着重于进阶应用范例的Mozilla社区博客--的Canvas扩展教程，位于：
https://developer.mozilla.org/en/canvas_tutorial及http://hacks.mozilla.org/category/canvas若需要深人了解Canvas细节，你的最佳选择当然是Canvas规范。当前版本的两段文档地址如下：
http://www.w3.org/TR/html5/the-canvas-element.htmlhttp://www.w3.org/TR/2dcontext若你更愿意一边亲手进行实践，一边参与讨论，或是针对具体环节报告错误，可以访问WHATWG页面进行互动：
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html小结我们的Canvas之旅终于结束了。从绘制两个重叠的红黄矩形到设计视频明信片，当中的过程是漫长的。你从中学到了如何使用颜色，创建阴影效果，并绘制直线、贝塞尔曲线、弧、矩形及剪切遮罩。我们着重介绍了Canvas的核心特色一~将像素处理方法与图案、变换、混合等方法相结合，来处理图像、制造动人的特效。我们甚至还尝试了手工代码动画。但它提供的仅是Canvas无限可能性中的惊鸿—瞥。在互联网上还有更多动人的案例——去发现它们吧！
虽然HTML5规范中关于SVG(译者注：ScalableVectorGraphics,可缩放矢量图形，一种基于XML编码的开放式图形、图像标准)矢量标准及数学标记语言MathML的内容只有两段，但这两种语言的结合将成为Web应用开发路上一块重要里程碑。MathML的贡献主要在科学领域，从SVG中获益的却是所有人——人们一直在期待着将标准化矢量格式结合到浏览器中。SVG这一独立主题可以写成许多本书，并远远超出此书的范围，而MathML的细节介绍亦是如此。因此在本章中，我们仅讨论在HTML5文档中将SVG与MathML相结合。
在HTML5中使用SVG及MathML的先决条件显然是浏览器对这两个组件的集成。另外，能辨识svg与math元素、将它们的值传递给排版引擎(layoutengine,又称renderingengine——渲染引擎，译者注)从而形成图形的解析器也是不可或缺的。在写作本书时，只有Firefox4能满足以上条件。图展示了3个使用MathML公式绘制SVG图形的例子。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
