3.1 Canvas颜色样式和阴影
3.1.1 设置填充和描边的颜色（掌握）
- fillStyle : 设置或返回用于填充绘画的颜色
- strokeStyle: 设置或返回用于笔触的颜色
以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba. 一般先进行设置样式然后进行绘制。
例如：
ctx.strokeStyle = "red";
ctx.strokeStyle = "#ccc";
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgba(255,0,0,6)";
3.1.2 设置阴影（了解，少用，性能差）
- 类比于CSS3的阴影。
- shadowColor ： 设置或返回用于阴影的颜色
- shadowBlur ： 设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
- shadowOffsetX： 设置或返回阴影距形状的水平距离
- shadowOffsetY： 设置或返回阴影距形状的垂直距离
ctx.fillStyle = "rgba(255,0,0, .9)"
ctx.shadowColor = "teal";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
3.2 复杂样式（了解）
3.2.1 创建线性渐变的样式（了解）
- 一般不用，都是用图片代替，canvas绘制图片效率更高。
- 线性渐变可以用于 矩形、圆形、文字等颜色样式
- 线性渐变是一个对象
- 语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0起始坐标，x1,y1结束坐标
例如：
//创建线性渐变的对象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点，把渐变设置到 填充的样式
3.2.2 设置圆形渐变（径向渐变） 了解
-
创建放射状/圆形渐变对象。可以填充文本、形状等
-
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
-
radial 半径的；放射状的；光线的；光线状的 英 ['reɪdɪəl] 美 ['redɪəl]
-
参数详解：
- x0: 渐变的开始圆的 x 坐标
- y0: 渐变的开始圆的 y 坐标
- r0: 开始圆的半径
- x1: 渐变的结束圆的 x 坐标
- y1: 渐变的结束圆的 y 坐标
- r1: 结束圆的半径
var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal'); //添加一个渐变颜色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//设置 填充样式为延续渐变的样式ctx.fillRect(100, 100, 500, 500);
3.2.3 绘制背景图（了解）
-
ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素了解
-
pattern：n. 模式；图案；样品 英 ['pæt(ə)n] 美 ['pætɚn]
-
第一参数：设置平铺背景的图片，第二个背景平铺的方式。
- image ： 规定要使用的图片、画布或视频元素。
- repeat ： 默认。该模式在水平和垂直方向重复。
- repeat-x ： 该模式只在水平方向重复。
- repeat-y ： 该模式只在垂直方向重复。
- no-repeat： 该模式只显示一次（不重复）。
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;// 把背景图设置给填充的样式
ctx.fill();
