如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。

要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。

对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。同样，注意到那个例子的垂直线条，其 Y 坐标刚好落在网格线上，如果不是的话，端点上同样会出现半渲染的像素点。

虽然开始处理可缩放的 2D 图形时会有点小痛苦，但是及早注意到像素网格与路径位置之间的关系，可以确保图形在经过缩放或者其它任何变形后都可以保持看上去蛮好：线宽为 1.0 的垂线在放大 2 倍后，会变成清晰的线宽为 2.0，并且出现在它应该出现的位置上。

lineCap属性

属性lineCap的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt,round,square。默认是butt。

lineJoin属性

lineJoin的属性值直接决定了图形中两线段连接处所显示的样子。它可以是这三种之一:round,bevel和miter.默认是miter。

miterLimit 属性的演示例子

As you've seen in the previous example, when joining two lines with themiter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, when the angles between each line decreases, the distance (miter length) between these points increases exponentially.

就如上一个例子所见的应用 miter 的效果，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join will be drawn.

miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。

I've made a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

我做了一个演示页面，你可以动手改变 miterLimit 的值，观察其影响效果。蓝色辅助线显示锯齿折线段的起点与终点所在的位置。

渐变Gradients

我们可以用线性或者径向的渐变来填充或者描边

用下面的方法新建canvasGadient对象，并且赋给图形的fillStyle或strokeStyle属性。

createLinearGradient(x1,y1,x2,y2) 方法接受4个参数，标书渐变的起点(x1,y1)与终点(x2,y2)。

createRadiaGradient(x1,y1,r1,x2,y2,r2)方法接受6个参数，前三个定义一个以(x1,y1)为原点，半径为r1的圆，后三个参数则定义另一个以(x2,y2)为原点，半径为r2的圆。

创建出canvasStop对象后，我们就可以用addColorStop方法给它上色了。

addColorStop(position,color)

addcolorStop方法接受两个参数，position参数必须是一个0.0与1.0之间的数值，表示渐变中颜色所在的相对位置。例如，0.5表示颜色会出现在正中间。color参数必须是一个有效的CSS颜色值（如#FFF，rgba(0,0,0,1)等等）。

图案 Patterns

实现图案的效果，有一个更加简单的方法：createPattern。

createPattern(image,type)

Image可以是一个Image对象的引用，或者另一个canvas对象。Type必须是下面的字符串之一：repeat,repeat-x,repeat-y,no-repeat。

注意：用canvas对象作为Image参数在Firefox 1.5(Gecko 1.8)中是无效的。

图案的应用于渐变类似，创建出一个pattern之后，赋给fillStyle或strokeSty le属性即可。

与drawImage有点不同，你需要确认image对象已经装载完毕，否则图案可能效果不对的。

对于Firefox浏览器，目前只支持属性repeat，如果赋其他值，什么效果都没有的。

阴影Shadows

shadowOffsetX=float

shadowOffsetY=float

shadowBlur=float

shadowColor=color

shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是0。

shadowBlur用于设定阴影的模糊成都，其数值并不跟像素挂钩，也不受变换矩阵的影响，默认为0。

shadowColor是标准的CSS颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

Canvas 填充规则