Canvas

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
它只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

1.canvas基础设置：

<canvas id="myCanvas" width="200" height="100">当前浏览器版本太低，请升级浏览器</canvas>

标签通常需要指定一个Id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

<script>
     var canvas = document.getElementById('canvas');  // 获取标签
     canvas.width = 200；  // 设置画布大小
     canvas.height = 100;

     var ctx = getContext('2d');    //创建局部环境
     ctx.beginPath();    //  开始绘制 (拿起画笔)
     ctx.lineWidth = 10;    // 设置划线的粗细
     ctx.strokeStyle = 'plum';   // 线的颜色
     ctx.moveTo(50, 50);  // 起始点坐标
     ctx.lineTo(50, 150);  //  途经点坐标(也可以是结束点)
     ctx.closePath();   // 闭合
     ctx.stroke();  // 绘制图形

    ctx.lineCap = 'round'; // 圆形键帽
    // ctx.lineCap = 'square';   // 矩形线帽

</script>

2. canvas 常见图形 圆、矩形

    ctx.strokeRect(0,0,400,300)       // 绘制矩形
    ctx.fillRect(400,400,400,300,'#ccc');    // 绘制带填充色的 矩形 

    ctx.beginPath();            // 绘制圆弧
    ctx.arc(300,300,100, 0, 360 * (Math.PI / 180));
    ctx.stroke();
   // ctx.arc( 圆心x，圆心 y，r，起始点和0度夹角 ，结束点和0度夹角，bool 绘制方向 false 默认顺时针);
   // 角度计算：Math.PI 相当于 π    
   // 1度 = Math.PI / 180   

3. 贝塞尔曲线：

 /* 绘制贝塞尔曲线 需要三个点
        1. 起始坐标点  使用 moveTo()
        2. 控制点     贝塞尔曲线的前两个参数 就是控制点的 x y    切线交点。
        3. 结束点     贝塞尔曲线的后两个参数

        ctx.moveTo(起始点,起始点)
        ctx.quadraticCurveTo(控制点,控制点,结束点,结束点); 
*/
    ctx.beginPath();
    ctx.moveTo(10, 200); //起始点
    var cp1x = 40, cp1y = 100;  //控制点
    var x = 200, y = 200; // 结束点
    //绘制二次贝塞尔曲线
    ctx.quadraticCurveTo(cp1x, cp1y, x, y);
    ctx.stroke();

4. Canvas 中文字的设置：

    // 1. 设置文字基本属性   // oblique 斜体 
    //    文字字体必须设置 否则不会正常展示
    ctx.font = "oblique 30px '微软雅黑'" 

    /*   2. 设置文字水平位置：
             left   起始点在文字左边
             right  起始点在文字右边
             center 起始点在文字中间
    */
    ctx.textAlign = 'left';
    /* 
        3. 设置文字纵向对齐方式 ----  常用值：
              alphabetic : 默认 根据字母基线对齐
              top ： 文字顶端对齐
              middle ： 文字中间对齐
              bottom ： 文字底端对齐
              hanging ： 悬挂基线
    */
    ctx.textBaseline = 'bottom';

     // 4. 绘制文字  
     // 绘制 实心 文字
     ctx.fillText('Hello Word1',300,200);
     // 绘制 空心 文字
     ctx.strokeText('Hello Word2',300,300);

5. 平移 和 旋转：

     // translate(x, y)   用来移动 canvas 的原点到指定的位置
     // translate 移动的是 canvas 的坐标原点(坐标变换)。

      ctx.save();  // 保存坐原点平移之前的状态
      ctx.translate(100, 100);
      ctx.strokeRect(0, 0, 100, 100)
      ctx.restore();  //  永远恢复最近一次的存档的坐标
      ctx.translate(220, 220);
      ctx.fillRect(0, 0, 100, 100)
     
      //  旋转45度  ctx.rotate(旋转角度);
    ctx.rotate( Math. PI / 180 * 45) );

6. Image 图片：

   // 图片绘制   ctx.drawImage(img,x,y,w,h);
   // 参数：DOM图片对象 ， x 图左上角坐标 ， y 图左上角坐标 ，w 图宽 ，h 图高
   var img = new Image();
   img.src = './shark1.png';
   var k = img.width / img.height;    // 计算原图宽高比
   ctx.drawImage(this, 0, 0, 200, 200 / k);   // 图片绘制
    /* 
       图片裁剪 
       ctx.drawImage(img,cx,cy,cw,ch,x,y,w,h);
       img,x,y,w,h 这五个参数 与 图片绘制时 参数一致

       cx 裁剪起点x
       cy 裁剪起点y
       cw 裁剪宽度     以原图大小为参照物
       ch 裁剪高度     以原图大小为参照物
   */
    ctx.drawImage(img , 0, 0, 510, 229, 0, 0, 510, 229);   //  图片裁剪