HTML5 canvas 标签属性

　　HTML5 <canvas>  标签用于绘制图像（通过脚本，通常是JavaScript）。<canvas> 标签本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。

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

javaScript 例子：

　　　　var c = document.getElementById("myCanvas")

　　　　var ctx = c.getContext("2d");

　　　　ctx.fillStyle = "yellow";　　

　　　　ctx.fillRect(20,50,150,100);

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

语法：context.fillStyle = color|gradient|pattern;　　默认值：#000000

属性值：

　　　　color　　　　指示绘图填充色的颜色值。默认是 #000000

　　　　gradient　　　用于填充绘图的渐变对象（线型或放射型）

　　　　pattern　　　　用于填充绘图的 pattern 对象。

1、gradient（用于填充绘图的渐变对象）　　详细解释

　　1.1 gradient（线型）

　　　　JavaScript例子：

　　　　　　　　　　　　var c = document.getElementById("myCanvas")

　　　　　　　　　　　　var ctx = c.getContext("2d");

　　　　　　　　　　　　var grd = ctx.createLinearGradient(0,0,170,0);

　　　　　　　　　　　　grd.addColor(0,"black");　　

　　　　　　　　　　　　grd.addCorlor(1,"white");

　　　　　　　　　　　　ctx.fillStyle = grd;

　　　　　　　　　　　　ctx.fillRect(0,0,100,200);

　　createLinearGradient() 方法创建线型的渐变对象。渐变可以用来填充矩形、圆形、线条、文本等等。该对象一般作为 strokeStyle 或 fillStyle 属性的值。

　　使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：addColorStop(0/0.1/0.2.../0.8/1,"color");

　　语法：context.createLinearGradient(x0,y0,x1,y1); 

　　参数值：

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

　　1.2 gradient（放射型）

　　javaScript 例子：

　　　　var c = document.getElementById("myCanvas");

　　　　var ctx = c.getContext(c);

　　　　var grd = ctx.createRadialGradient(75,50,5,90,60,100);

　　　　grd.addColorStop(0,"red");

　　　　grd.addColorStop(1,"white");

　　　　ctx.fillStyle = grd;

　　　　ctx.fillRect(0,0,100,200);

 

　　　　createRadialGradient()方法创建放射状/圆形渐变对象。渐变可以用于填充矩形、圆形、线条、文本等等。该对象一般作为 strokeStyle 和 fillStyle 属性的值。

　　　　使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。如：addColorStop(0/0.1/0.2.../0.8/1,"color");

　　　　语法：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);　　

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

2.pattern（用于填充绘图的 pattern 对象） 详细解释

　　JavaScript 例子：

　　　　var c = document.getElementById("myCanvas");

　　 　　var ctx = c.getContext("2d");

　　　　//得到需要填充的样式

　　　　var img = document.getElementById("lamp");

　　　　var pat = ctx.createPattern(img,"repeate");

　　　　ctx.rect(0,0,150,100);

　　　　ctx.fillStyle = pat;

　　　　ctx.fill();

　　　　

　　createPattern()方法在指定的方向内重复指定的元素。元素可以是 图片、视频或者其他 <canvas> 元素。被重复的元素可以用来绘制/填充矩形、圆形或线条等等。

　　语法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

　　参数值：

　　　　　　

参数	描述
image	规定要使用的模式的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

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

　　　　例子：

　　　　　　　　var c = document.getElementById("myCanvas");

　　　　　　　　var ctx = c.getContext("2d");

　　　　　　　　var gra = ctx.createLinearGradient(0,0,170,0);

　　　　　　　　gra.addColorStop(0,"red");　　-----对应着矩形的第一条高

　　　　　　　　gra.addColorStop(0.5,"yellow");------对应着矩形的两条宽

　　　　　　　　gra.addColorStop(1,"green");　------对应着 矩形的第二条高

　　　　　　　　//渐变填充

　　　　　　　　ctx.strokeStyle = gra;

　　　　　　　　//设置画布的边框

　　　　　　　　ctx.lineWidth = 5;

　　　　　　　　//生成矩形

　　　　　　　　ctx.strokeRect (20,20,150,100);

　　语法：content.strokeStyle = color|gradient|pattern.

　　属性值（和fillStyle属性值一致）：

值	描述
color	指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性 或 放射性）。
pattern	用于创建 pattern 笔触的 pattern 对象。

 

　　　　shadowColor 属性设置或返回用于阴影的颜色。shadowColor 属性需要和 shadowBlur 一起使用，来创建阴影。可以通过使用 shadowOffsetX 和 shadowOffsetY属性来调节阴影效果。

　　　　shadowBlur  属性设置或返回阴影的模糊级别。

　　　　例子：

　　　　　　　　var c = document.getElementById("myCanvas");

　　　　　　　　var ctx = c.getContext("2d");

　　　　　　　　//设置阴影的模糊级别

　　　　　　　　ctx.shadowBlur = 20;

　　　　　　　　//设置阴影的颜色

　　　　　　　　ctx.shadowColor = "yellow";

　　　　　　　　//绘制被填充的矩形的颜色

　　　　　　　　ctx.fillStyle = "red" ;

　　　　　　　　//绘制被填充的矩形（矩形距离左边 20px,距离上边 20px,长宽为 100*150）

　　　　　　　　ctx.fillRect(20,20,100,150);

　　语法：context.shadowColor = color;

　　语法：context.shadowBlur = number;

　　属性值：

值	描述
color	用于阴影的 CSS 颜色值。默认值是 #000000。

 

　　属性值：

值	描述
number	阴影的模糊级数

 

　　　　shadowOffsetX 属性设置或返回阴影与形状的水平距离。shadowOffsetY属性设置或返回阴影与形状的的垂直距离。

　　　　shadowOffsety=0 指示阴影位于形状的正下方。
　　　　shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。
　　　　shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。

　　　　shadowOffsetX=0 指示阴影位于形状的正下方。

 

　　　　shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

 

　　　　shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

 

　　语法：

　　　　　　context.shadowOffsetY  = number;

　　　　　　context.shadowOffsetX = number;

　　属性值：

　　　　　　

值	描述
number	正值或负值，定义阴影与形状的垂直距离。