canvas基础介绍（一）
canvas只支持两种形式的图形绘制：路径和矩形
- 矩形
矩形的绘制方法有三种，这三种方法在绘制之后马上显示在canvas画布上，属于即时生效。
ctx.fillRect(10,20,100,300); //一个填充矩形
ctx.strokeRect(10,50,200,100);//一个矩形边框
ctx.clearRect(40,40,100,100);//清除矩形区域，清除
- 路径
路径是图形的基本元素。使用路径绘制图形需要额外的步骤：
- 创建路径起始点
- 使用画图命令画出路径
- 路径封闭
- 对路径区域进行描边或填充来渲染图形
绘制路径主要用到的函数：
- beginPath() ：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
- closePath() ：闭合路径之后图形绘制命令又重新指向到上下文中。
- stroke() ：用线条绘制曲线轮廓。
- fill()：填充内容区域形成实心的图形。
注意： 1. 调用 fill() 函数默认会自动闭合未闭合形状，而 stroke() 函数并不会闭合线条。
2. 一般在 beginPath() 函数执行后或canvas画布刚建的时候，第一条构造路径命令被默认为moveTo() ，来指定初始位置。
下面是几个小例子：
绘制一个描边三角形
ctx.save();
ctx.beginPath();
ctx.moveTo(20,30);
ctx.lineTo(50,90);
ctx.lineTo(45,120);
ctx.closePath();
ctx.strokeStyle='red';
ctx.stroke();
ctx.restore();
绘制填充三角形
ctx.save();
ctx.beginPath();
ctx.moveTo(120,80);
ctx.lineTo(200,190);
ctx.lineTo(300,190);
ctx.fillStyle='purple';
ctx.fill();
ctx.restore();
绘制笑脸
ctx.save();
ctx.beginPath();
ctx.arc(250,200,80,0,Math.PI*2);
ctx.moveTo(228,180);
ctx.arc(220,180,8,0,Math.PI*2);
ctx.moveTo(288,180);
ctx.arc(280,180,8,0,Math.PI*2);
ctx.moveTo(200,200);
ctx.arc(250,200,50,Math.PI,Math.PI*2,true);//true为逆时针
ctx.stroke();
图形色彩变化
fillStyle=’ rgba(255,0,0,0.3)’ 和 strokeStyle=’#333’ 都支持符合 CSS3 规范的颜色值。
- 线条设置样式：
lineWidth=’ ':设置线条宽度
lineCap=’ ’ 设置线条末端样式。round、square、butt。默认为butt
lineJoin=’ ’ 设置线条与线条相交处的样式。round, bevel 和 miter。默认是 miter。 - 阴影设置：
shadowOffsetX=float 和shadowOffsetY=float 设置阴影在x和y方向的偏移值。负值表示向上或向左偏移，正值表示向右或向下偏移。
shadowBlur=float 设置阴影的模糊程度。默认0
shadowColor=color 支持css3规则的颜色。 设置阴影的颜色。默认是全透明的黑色。 - 渐变
1.创建canvasGradient对象：
线性渐变：createLinearGradient(x1,y1,x2,y2) 表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
径向渐变：createRadialGradient(x1,y1,r1,x2,y2,r2) 前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
2.用addColorStop上色
gradient.addColorStop(position,color) position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。
strokeStyle 和 fillStyle 属性都可以接受 canvasGradient 对象。
ctx.save();
// 线性渐变
let linearGradient=ctx.createLinearGradient(20,30,200,300);
linearGradient.addColorStop(0.2,"rgba(255,0,0,0.5)");
linearGradient.addColorStop(0.6,'#333');
linearGradient.addColorStop(0.8,'rgba(0,255,0,0.8)');
linearGradient.addColorStop(1,'white');
// 径向渐变
let radialGradient=ctx.createRadialGradient(20,30,10,200,300,20);
radialGradient.addColorStop(0.2,"rgba(255,0,0,0.5)");
radialGradient.addColorStop(0.6,'#333');
radialGradient.addColorStop(0.8,'rgba(0,255,0,0.8)');
radialGradient.addColorStop(1,'white');
ctx.fillStyle=radialGradient;
ctx.fillRect(20,30,180,270);
ctx.restore();