HTML5-Convas-APIs_属性

☆ context.lineWidth
设置线宽，值，可以小于1，以像素为单位，单位是隐式的，赋值的时候不能带单位名称。默认值为1，但1在各浏览器中看起来大概为2像素，可能是因为使用了边缘柔化技术（chrome14看起来不是柔化）。值若值<=0则变为默认的1。若值大于0小于1，则浏览器通常会减淡颜色显示，但看仔细看仍是2像素；chrome14在值的范围为(0, 0.25)时显示有问题，大于等0.25显示正常，且等于0.25则看起来是1像素，但有时候1像素的颜色很淡，甚至显示不出来，可以设置略大于1的值（如1.01）来解决此问题；IE9在值的范围为(0, 0.13)显示有问题。若一个形状内有填充，则填充会与线宽的一半叠加。如：
context.lineWidth = 4; //值不用带单位，可以带引号，也可以不带

☆ context.lineJoin
设置路径连接点的样式，其值可以是round, bevel or miter (and the corresponding context.miterLimit value to tweak it）。如：
context.lineJoin = 'round';

☆ context.lineCap
设置线段端点类型，其值可以是 butt, square, or round

☆ context.strokeStyle
定义路径绘图样式，其值可以是颜色、图像或渐变色等。如：
// Change the color to brown
context.strokeStyle = '#663300';

☆ context.fillStyle
设置填充样式，可以是颜色、渐变和图像等，通常结合context.fill()方法使用。如：
// Set the fill color to green and fill the canopy
context.fillStyle = '#339900';
//渐变填充
context.fillStyle = gradientName;
context.fill();
//背景图像填充
context.fillStyle = context.createPattern(imgName, 'repeat');

☆ context.font
用于绘制文本时设置文本字体和字体样式，用法同CSS相似，默认大小是10px，如：
context.font = "60px italic 华文行楷";

☆ context.textAlign
设置文本对其样式，其值可以是start, end, left, right, center默认为start。如：
context.textAlign = 'center';

☆ textBaseline
设置文本的环绕样式，其值可以是top, hanging, middle, alphabetic, ideographic, bottom。默认为alphabetic。

☆ 阴影与模糊属性
阴影与模糊属性可应用于路径、填充区、文本和图像等任何绘图对象。它们是如下的一组相关属性：
(1)context.shadowColor:设置阴影颜色，可以是任意CSS颜色，包括透明度，如：
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

(2)context.shadowOffsetX:设置对象阴影偏离对象本身的水平距离，正值向右偏，负值向左偏。如：
context.shadowOffsetX = 15;

(3)context.shadowOffsetY:设置对象阴影偏离对象本身的垂直距离，正值向下偏，负值向上偏。如：
context.shadowOffsetY = -10;

(4)context.shadowBlur:设置阴影的模糊程度，值越大越模糊。如：
context.shadowBlur = 2;

☆ context.globalAlpha
设置绘图环境context的全局透明度，值在[0, 1]之间。如果之后的fillStyle或者strokeStyle带有透明度，则会与globalAlpha的值复合，表现为值相乘。

☆ context.globalCompositeOperation
这个属性指定了新绘制内容与（全部）已绘制内容的叠加和裁剪方式。它有11个值，默认值是source-over。
•source-over:新绘制内容在上。
•destination-over:已绘制内容在上。
•source-atop:新绘制内容在上，但是在新绘制内容中只有与已绘制内容叠加的部分才会显示，其余部分则被裁剪（也可以说是透明）而不会被显示。已绘制内容全都显示，但叠加的部分在下面。
•destination-atop:已绘制内容在上，但是在已绘制内容中只有与新绘制内容叠加的部分才会显示，其余部分则不会被显示。新内容全都会显示，但叠加的部分显示在下面。
•source-in:新绘制内容中只有与已绘制内容叠加的部分会显示，其余部分则不显示。已绘制内容都不会被显示。叠加部分中已绘制内容的透明度将反作用于新绘制内容。
•destination-in:已绘制内容中只有与新绘制内容叠加的部分会显示。其余部分则不显示。新绘制内容都不会被显示。叠加部分中新绘制内容的透明度将反作用于已绘制内容。
•source-out:新绘制内容中没有与已绘制内容叠加的部分都显示。已绘制内容都不会被显示。叠加部分中已绘制内容的透明度将反作用于新绘制内容。
•destination-out:已绘制内容中没有与新绘制内容叠加的部分都显示。新绘制内容都不会被显示。叠加部分中新绘制内容的透明度将反作用于已绘制内容。
•lighter:叠加部分中，新绘制内容与旧绘制内容的颜色和透明度将复合，透明度越大叠加区域亮度越大，若两者都不透明，叠加区域会呈白色。
•copy:新绘制内容完全显示，已绘制内容完全不显示。chrome14及以下不支持。
•xor:未叠加区域都会被显示。叠加区域复合显示，复合的结果由二者透明度决定，若二者都不透明，则叠加区域不显示。