strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式，该属性有3个值，color 指示绘图笔触颜色的 CSS 颜色值，默认值是 #000000。gradient 用于填充绘图的渐变对象（线性或放射性）。pattern 用于创建 pattern 笔触的 pattern 对象。pattern 对象是 HTML5 Canvas API 中用于给指定的图形铺上指定的图像的关键对象，这与 CSS 中b ackground 属性的作用有点类似。Pattern 对象就表示平铺图像所采用的模式（在指定的图形上以何种方式进行平铺）。

　　下面 4 个属性都属于 Canvas 线条样式：

　　lineWidth 属性设置或返回当前线条的宽度，以像素计。默认值是 1，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边各有线条宽的一半。

　　lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。默认值为 miter，创建尖角，会受到 miterLimit 属性的影响。bevel 用于创建斜角。round 用于创建圆角。

　　lineCap 属性设置或返回线条末端线帽的样式。默认值是 butt 向线条的每个末端添加平直的边缘。square 向线条的每个末端添加正方形线帽。round 向线条的每个末端添加圆形线帽。注意：使用 "round" 和 "square" 会使线条略微变长。

　　miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。注意：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。默认值为 10，值为正数，规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

　　①、Canvas 绘制线条

　　通过指定从何处开始，在何处结束，然后使用 stroke() 方法来绘制线条：

绘制线条); ); ); ); ); 15 cxt.stroke();

 　　②、Canvas 绘制圆形

　　在 canvas 中绘制圆形, 可以使用如下方法：

arc(x,y,r,start,stop);

　　通过规定尺寸、颜色和位置，来绘制一个圆：

绘制圆); ); ; 13 cxt.beginPath(); ); 15 cxt.closePath(); 16 cxt.fill();

　　(5)、Canvas 文本

　　使用 canvas 绘制文本，重要的属性和方法如下：

　　　　①、font 属性定义字体。

　　　　②、fillText(text,x,y) 方法在 canvas 上绘制实心的文本。

　　　　③、strokeText(text,x,y) 方法在 canvas 上绘制空心的文本。

　　下面的例子，使用 fillText() 并使用 "Arial" 字体在画布上绘制一个高 30px 的文字：

绘制实心文本); ); ; );

　　下面的例子，使用 strokeText() 并使用 "Arial" 字体在画布上绘制一个高 30px 的文字：

绘制空心文本); ); ; );

　　Canvas 用于绘制文本的属性还有两个：textAlign 属性设置或返回文本内容的当前对齐方式。textBaseline 属性设置或返回在绘制文本时使用的当前文本基线。还有一个方法：measureText() 返回包含指定文本宽度的对象。

　　(6)、Canvas 渐变

　　Canvas 颜色、样式、阴影属性和方法：

属性 说明

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle 设置或返回用于笔触的颜色、渐变或模式

shadowColor 设置或返回用于阴影的颜色

shadowBlur 设置或返回用于阴影的模糊级别

shadowOffsetX 设置或返回阴影距形状的水平距离

shadowOffsetY 设置或返回阴影距形状的垂直距离

方法 说明

createLinearGradient() 创建线性渐变（用在画布内容上）

createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）

createPattern() 在指定的方向上重复指定的元素

addColorStop() 规定渐变对象中的颜色和停止位置

　　渐变可以填充在矩形，圆形，线条，文本等等，各种形状可以自定义不同的颜色。

　　以下有两种不同的方式来设置 Canvas 渐变：

　　　　①、createLinearGradient(x,y,x1,y1) 方法创建线条渐变。

　　当使用渐变对象，必须指定两种或两种以上的停止颜色。设置 fillStyle 或 strokeStyle 属性的值为渐变，然后绘制形状，如矩形，文本，或一条线。