HTML5 Canvas 2D API 规范 1.0 中文版

W3CCanvas2DAPI规范1.0bycodeEx.cnCanvas 2D API 规范 1.0 （W3CEditor'sDraft21October2009）翻译：CodeEx.CN2010/10/21引用本文，请不要删掉翻译行，更多精彩，请访问：原文请参看：摘要................................................................21介绍..........................................................21.1术语：........................................................22CANVAS接口元素定义............................................32.1GETCONTEXT()方法..............................................32.2TODATAURL()方法...............................................33二维绘图上下文................................................43.1CANVAS的状态..................................................73.2转换(TRANSFORMATIONS).........................................83.3合成（COMPOSITING）..........................................103.4颜色和风格...................................................123.5线风格.......................................................163.6阴影(SHADOWS)................................................183.7简单形状（矩形）.............................................183.8复杂形状(路径-PATHS).........................................193.8.1路径起始函数................................................193.8.2绘制函数....................................................193.8.3辅助方法—点是否在路径里....................................223.8.4MOVETO方法..................................................22第1页共30页W3CCanvas2DAPI规范1.0bycodeEx.cn3.8.5LINETO方法..................................................223.8.6RECT方法....................................................223.8.7圆弧........................................................233.8.8昀短圆弧....................................................243.8.9二次方、三次方贝塞尔曲线....................................243.9文字.........................................................253.10绘制图片....................................................263.11像素级操作..................................................273.11.1CREATEIMAGEDATA方法.........................................283.11.2GETIMAGEDATA方法............................................283.11.3PUTIMAGEDATA方法............................................283.11.4演示例子..................................................283.12绘图模型【此段翻译不怎么样，可以参看原英文】................294参考资料.....................................................29摘要本规范定义了二维Canvas（画布）的绘画API，使用这些API使得可以在Web页面上进行立即模式的二维图形绘制。1介绍本规范描述了立即模式的API和为了在光栅风格的绘图区域内绘制2维矢量图形所必须的方法。其主要应用是HTML5规范定义的canvas元素。1.1术语：2D：二维，你们懂的3D：三维，你们懂的API：编程接口Canvasinterfaceelement：实现了本规范定义的绘图方法和属性的元素，简言之，就是“canvas”元素Drawingcontext：绘图上下文，一个左上角为(0,0)的笛卡尔坐标平面，在本平面中往右则x坐标增加和往下方y坐标增加Immediate-mode:立即模式，一种绘图格式，当绘制完成后，所有的绘图结构将从内存中立即丢弃，本API即为此种图形绘制格式第2页共30页W3CCanvas2DAPI规范1.0bycodeEx.cnRetained-mode：残留模式：另一种绘图格式，当绘制完成后，所有的绘图结构仍在内存中残留，例如DOM、SVG即是此种绘制格式Raster：光栅风格，图形的一种风格，其由多行断开的图片（行）组成，每行都包含确定的像素个数Vector：矢量，你们懂的source-overoperator：我不懂，你们自己看吧2Canvas接口元素定义DOM接口：interfaceCanvasElement:Element{attributeunsignedlongwidth;attributeunsignedlongheight;ObjectgetContext(inDOMStringcontextId);DOMStringtoDataURL(optionalinDOMStringtype,inany...args);};这里width和height必须是非负值，并且无论什么时候重新设置了width或height的值，画布中任何已绘对象都将被清除，如下所示的JS代码中，仅仅昀后一个矩形被绘制：//canvasisareferencetoacanvaselementvarcontext=canvas.getContext('2d');context.fillRect(0,0,50,50);canvas.setAttribute('width','300');//clearsthecanvascontext.fillRect(0,100,50,50);canvas.width=canvas.width;//clearsthecanvascontext.fillRect(100,0,50,50);//onlythissquareremains2.1getContext()方法为了在canvas上绘制，你必须先得到一个画布上下文对象的引用，用本方法即可完成这一操作，格式如下：context=canvas.getContext(contextId)方法返回一个指定contextId的上下文对象，如果指定的id不被支持，则返回null，当前唯一被强制必须支持的是“2d”，也许在将来会有“3d”，注意，指定的id是大小写敏感的。2.2toDataURL()方法此函数，返回一张使用canvas绘制的图片，返回值符合data:URL格式，格式如下：url=canvas.toDataURL([type,...])规范规定，在未指定返回图片类型时，返回的图片格式必须为PNG格式，第3页共30页W3CCanvas2DAPI规范1.0bycodeEx.cn如果canvas没有任何像素，则返回值为：“data:,”，这是昀短的data:URL，在text/plain资源中表现为空字符串。type的可以在image/png，image/jpeg,image/svg+xml等MIME类型中选择。如果是image/jpeg，可以有第二个参数，如果第二个参数的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。下面的代码可以从ID为codeex的canvas中取得绘制内容，并作为DataURL传递给img元素，并显示。varcanvas=document.getElementById('codeex');varurl=canvas.toDataURL();//id为myimg的图片元素myimg.src=url;3二维绘图上下文当使用一个canvas元素的getContext(“2d”)方法时，返回的是CanvasRenderingContext2D对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0,0)，在本平面中往右则x坐标增加和往下方y坐标增加。每一个canvas元素仅有一个上下文对象。其接口如下：interfaceCanvasRenderingContext2D{//back-referencetothecanvasreadonlyattributeHTMLCanvasElementcanvas;//statevoidrestore();//popstatestackandrestorestatevoidsave();//pushstateonstatestack//transformations(defaulttransformistheidentitymatrix)voidrotate(infloatangle);voidscale(infloatx,infloaty);voidsetTransform(infloatm11,infloatm12,infloatm21,infloatm22,infloatdx,infloatdy);voidtransform(infloatm11,infloatm12,infloatm21,infloatm22,infloatdx,infloatdy);voidtranslate(infloatx,infloaty);//compositingattributefloatglobalAlpha;//(default1.0)attributeDOMStringglobalCompositeOperation;//(defaultsource-over)//colorsandstylesattributeanyfillStyle;//(defaultblack)第4页共30页W3CCanvas2DAPI规范1.0bycodeEx.cnattributeanystrokeStyle;//(defaultblack)CanvasGradientcr