canvas操作手册

Canvas开发帮助文档（王清龙整理二〇〇九年三月二十八日）HTML5canvas标签定义和用法canvas标签定义图形，比如图表和其他图像。HTML4.01与HTML5之间的差异canvas标签是HTML5中的新标签。canvas的历史这个HTML元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。canvas标记由Apple在Safari1.3Web浏览器中引入。对HTML的这一根本扩展的原因在于，HTML在Safari中的绘图能力也为MacOSX桌面的Dashboard组件所使用，并且Apple希望有一种方式在Dashboard中支持脚本化的图形。Firefox1.5和Opera9都跟随了Safari的引领。这两个浏览器都支持canvas标记。我们甚至可以在IE中使用canvas标记，并在IE的VML支持的基础上用开源的JavaScript代码（由Google发起）来构建兼容性的画布。参见：。canvas的标准化的努力由一个Web浏览器厂商的非正式协会在推进，目前canvas已经成为HTML5草案中一个正式的标签。参见：标记和SVG以及VML之间的差异canvas标记和SVG以及VML之间的一个重要的不同是，canvas有一个基于JavaScript的绘图API，而SVG和VML使用一个XML文档来描述绘图。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个canvas标记中移除元素，往往需要擦掉绘图重新绘制它。如何使用canvas标记绘图大多数Canvas绘图API都没有定义在canvas元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。CanvasAPI也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath()和arc()方法。一旦定义了路径，其他的方法，如fill()，都是对此路径操作。绘图环境的各种属性，比如fillStyle，说明了这些操作如何使用。注释：CanvasAPI非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个canvas图形，必须要么自己绘制它再用位图图像合并它，或者在canvas上方使用CSS定位来覆盖HTML文本。例子：scripttype=text/javascriptfunctiondrawCanvas(){varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);}/script...canvasid=myCanvasyourbrowserdoesnotsupportthecanvastag/canvas属性属性值描述heightpixels设置canvas的高度。widthpixels设置canvas的宽度。标准属性class,contenteditable,contextmenu,dir,draggable,id,irrelevant,lang,ref,registrationmark,tabindex,template,title事件属性onabort,onbeforeunload,onblur,onchange,onclick,oncontextmenu,ondblclick,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onfocus,onkeydown,onkeypress,onkeyup,onload,onmessage,onmousedown,onmousemove,onmouseover,onmouseout,onmouseup,onmousewheel,onresize,onscroll,onselect,onsubmit,onunloadHTML5DOMCanvas对象Canvas对象Canvas对象表示一个HTML画布元素-canvas。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D对象获得。这是通过Canvas对象的getContext()方法并且把直接量字符串2d作为唯一的参数传递给它而获得的。canvas标记在Safari1.3中引入，在制作此参考页时，它在Firefox1.5和Opera9中也得到了支持。在IE中，canvas标记及其API可以使用位于excanvas.sourceforge.net的ExplorerCanvas开源项目来模拟。提示：如果希望学习如何使用canvas来绘制图形，可以访问Mozilla提供的Canvas教程（英文）以及相应的中文Canvas教程。Canvas对象的属性height属性画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是300。width属性画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是300。Canvas对象的方法方法描述getContext()返回一个用于在画布上绘图的环境。getContext()暂时实现了2d的web绘图环境，但是3d的环境还未实现CanvasRenderingContext2D对象CanvasRenderingContext2D对象提供了一组用来在画布上绘制的图形函数。可用的函数非常丰富，它们可以分为以下几类：绘制矩形可以使用strokeRect()和fillRect()来绘制矩形的边框和填充矩形。此外，可以使用clearRect()来清除矩形所定义的区域。绘制图像在CanvasAPI中，图像通过表示HTMLimg元素的Image对象来指定，或者通过使用Image()构造函数所创建的屏幕外图像来指定。一个Canvas对象也可以用作图像来源。可以使用drawImage()方法在一个画布上绘制图像；而更为常见的形式是，允许源图像的任意矩形区域缩放或绘制到画布上。创建和渲染路径画布的一项强大功能是，它能够从基本的绘图操作来构建图形，然后，绘制这些图形的框架（勾勒它们）或者给这些图形的内容涂色（填充它们）。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。为了构建一个多条线段所构成的一个连续的封闭形状，绘制操作之间需要一个连接点。为此，画布保存了一个当前位置。画布绘制操作显式地使用这个位置作为它们的起始点，并且更新它直到到达终点。可以把这看做是使用钢笔或纸来绘画：当您完成了一条具体的线段或曲线，当前位置就是完成这一操作之后钢笔所停留的点。可以在当前路径中创建一系列互相不连续的形状，它们都使用同样的绘制参数一起渲染。要分隔开这些形状，请使用moveTo()方法，这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候，就创建了一条新的路径，这是用来表示一组连接起来的操作的画布术语。一旦您所想要的路径形成了，可以使用stroke()绘制其边框，使用fill()来绘制其内容；或者两件事都做。可用的图形操作有：用来绘制直线的lineTo()，用于绘制矩形的rect()，用于绘制部分圆形的arc()或arcTo()，以及用于绘制曲线的bezierCurveTo()或quadraticCurveTo()。除了勾勒和填充，还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的，区域之外的像素是不显示的。剪切区域是累加性的；调用clip()可以将当前路径和当前绘制区域取交集，产生一个新的区域。不幸的是，没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。如果任何子路径中的线段没有形成一个闭合的图形，fill()和clip()操作通过添加一条从子路径的起点到终点的、虚拟（勾勒的时候看不到）线段来闭合它。可选的是，也可以调用closePath()来显示地添加这条线段。颜色、渐变和模式在填充和勾勒路径时，可用fillStyle和strokeStyle属性来指定线段或者绘制区域如何绘制。CSS样式颜色字符串，以及描述渐变和模式的CanvasGradient或CanvasPattern都是可以接受的。要创建一个渐变，请使用createLinearGradient()或createRadialGradient()。要创建一个模式，请使用createPattern()。要用CSS表示法来指定不透明的颜色，就采用#RRGGBB形式的字符串，其中RR、GG和BB分别是指定颜色的红色、绿色和蓝色成分的十六进制，其值都在00和FF之间。例如，完全红色的值是#FF0000。要指定部分透明的颜色，请使用一个rgba(R,G,B,A)形式的字符串。在这种形式中，R、G和B将颜色的红色、绿色和蓝色成分指定为0到255之间的十进制整数，并且A把alpha（不透明）成分指定为0.0（完全透明）和1.0（完全不透明）之间的一个浮点数值。例如，半透明的完全红色为rgba(255,0,0,0.5)。线条宽度、线帽和线条连接画布为调整各种线条显示提供了几个选项。可以使用lineWidth属性来指定线条的宽度，用lineCap属性来指定的端点如何绘制，并且用lineJoin属性来指定线条如何连接。坐标空间和转换默认情况下，一个画布的坐标空间使用画布的左上角(0,0)作为原点，x值向右增加，y值向下增加。这个坐标空间中的一个单位通常转换为像素。然后，可以转换坐标空间，产生你在绘图操作中所指定的用来移动、缩放或旋转的任何坐标或范围。这通过translate()、scale()和rotate()方法来实现，它们会对画布的变换矩阵产生影响。由于坐标空间可以像这样转换，您传递给lineTo()这样方法的坐标可能无法用像素来度量。因此，CanvasAPI使用浮点数而不是整数。变换按照它们被指定的顺序相反的顺序来处理。例如，调用scale()之后，紧接着调用translate()，这会首先变换坐标系统，然后再缩放。组合通常，图形是一个绘制于另一个的上面，新的图形使得在它之前绘制在其下方的图形变得模糊。这是一个画布中的默认行为。然而，您可以通过为globalCompositeOperation属性指定不同的值来执行很多有趣的操作，范围包括从XOR操作到增量或减暗图形区域。阴影CanvasAPI包含了可以自动为您所绘制的任何图形添加下拉阴影的属性。然而，在编写本参考页时，Safari是唯一实现了这一API的浏览器。阴影的颜色可用shadowColor属性来指定，并且可以通过shadowOffsetX和shadowOffsetY属性来改变。另外，应用到阴影边缘的羽化量也可以使用shadowBlur属性来设置。保存图形状态save()和restore()方法允许你保存和恢复一个CanvasRenderingContext2D对象的状态。save()把当前状态推入到栈中，而restore()从栈的顶端弹出最近保存的状