canvas知识点

1.canvas标签

<canvas id="canvas">
      你的浏览器不支持canvas，请升级浏览器.
</canvas>

2.canvas绘图上下文context

var canvas  = document.getElementById( 'canvas' ); //获得画布
var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl
1)上下文，所有绘制操作api的入口。
2)canvas本身无法绘制任何内容，canvas的绘图是使用Javascript操作的。

3.基本的绘制路径

3.1 设置绘制起点（moveTo）

语法：ctx.moveTo(x,y)
注意：1、设置上下文绘制路径的起点。
      2、 x，y都是相对于canvas 盒子的左上角。
      3、 绘制线段必须先设置起点。

3.2 设置直线（lineTo）

语法：ctx.lineTo(x,y)
注意：1、从x,y的位置绘制一条直线到起点或者上一个线头点。

3.3 路径开始和闭合

开始路径 ctx.beginPath();
闭合路径 ctx.closePath();
注意：1、绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。
      2、闭合路径会自动把最后的线头和开始的线头连在一起。

3.4 描边（stroke）

语法：ctx.strokeStyle = "rgb(255,0,0)";
      ctx.stroke();
注意：1、根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke。

3.5 填充（fill）

语法：ctx.fillStyle="green";
     ctx.fill();
注意：1、将闭合路径的内容填充具体的颜色。

3.6 绘制矩形

语法：创建矩形：ctx.rect(x,y,width,height)
      描边矩形：ctx.strokeRect(x,y,width,height)
      填充矩形：ctx.fillRect(x,y,width,height)
      清除矩形：ctx.clearRect(x,y,width,height)
注意：1、x,y为矩形左上角坐标。
      2、该方法只是规划了路径，并没有填充和描边。
      3、需加ctx.fill()以填充 || ctx.stroke()描边

3.7 绘制圆形（arc）

语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
注意：1、x,y圆心坐标。
      2、r半径
      3、sAngle绘制开始的弧度，圆心到最右边点是0度，顺时针方向弧度增大。
      4、eAngle结束的弧度，单位π
      5、counterclockwise是否逆时针，true逆时针
      6、弧度角度转换：rad = deg*Math.PI/180;

true为逆时针，false为顺时针

4.canvas颜色样式和阴影

4.1 颜色

ctx.fillStyle :  设置或返回用于填充绘画的颜色
ctx.strokeStyle:  设置或返回用于笔触的颜色

4.2 阴影

    ctx.fillStyle = "pink"
    ctx.shadowColor = "阴影颜色";
    ctx.shadowBlur = 正数（模糊级别）;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.fillRect(100, 100, 100, 100);

5.canvas文本and渐变and图像

5.1 文本

语法：1、font - 定义字体
      2、fillText(text,x,y) - 绘制实心文本
      3、strokeText(text,x,y) - 绘制空心文本
案例：
      ctx.strokeStyle = "blue";
      ctx.font = "30px Arial";
      ctx.fillText("hello world",10,50);
      （高30px、Arial字体的蓝色实心文字）

5.2 渐变

语法：1、createLinearGradient(x,y,x1,y1) - 线条渐变
     2、createRadialGradient(x,y,r,x1,y1,r1) - 径向渐变
案例：
      (创建渐变、填充渐变)
      var  grd = ctx.createLinearGradient(0,0,200,0);
      grd.addColorStop(0,"red");
      grd.addColorStop(1,"white");

      ctx.fillStyle = grd;
      ctx.fillRect = "10,10,100,100"

5.3 图像

ctx.drawImage(image，10，10)