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:未叠加区域都会被显示。叠加区域复合显示,复合的结果由二者透明度决定,若二者都不透明,则叠加区域不显示。