前言

canvas是html5中新增的标签元素，用于定义图形，如图标和其它图形，canvas相当于一个画布，绘制图形要通过js脚本来实现；

目前大部分主流高版本浏览器已支持canvas功能~

创建canvas画布仅需如下代码即可：

    <canvas></canvas> // 标签内部无需加内容
    <canvas>对不起，您的浏览器不支持canvas标签，请使用高版本浏览器</canvas> // 对于不识别的低版本浏览器，就会显示出此提示文字

使用方法

具体使用主要有以下几个步骤：

创建画布

<canvas></canvas>

注意：画布的大小默认是150宽，100高，但是要改变画布大小，就一定要在canvas这个对象身上改变他的宽高，而不能在style上面直接更改~

    <canvas width="200" height="500"></canvas> // 此方法可行
    <style>
       canvas {
          width: 200px;
          height: 500px;
        }
    </style>  // 此方法就会拉糊画面，不可取

获取canvas标签

var canvas = document.getElementById('canvas');

获取上下文对象

var ctx = canvas.getContext('2d'); // 相当于拿到了画画的工具箱

开启一条路径

ctx.beginPath(); 即表示从此处开始作画

画图（注意：这一步画布上并未有轨迹）

ctx.rect(40, 40, 120, 200) // 画一个矩形

着色（注意：这一步画布上才有轨迹）

ctx.stroke(); // 空心的轨迹

其它功能

清除画布

清除画布即是橡皮擦功能，可以将画布中内容抹掉；

clearRect(x, y, width, height); // 清除画布

画直线

    moveTo(x1,y1) // 起点坐标
    lineTo(x2,y2) // 终点坐标

画文字

    fillText(text, x, y); // text是文字内容，x，y是坐标，画出来的是被填充的文字
    strokeText(text, x,y); // 画出来的是空心的文字
    textAlign = center|end|left|right|start // 分别表示在指定位置开始| 在指定位置结束 | 文本的中心被放置在指定位置 | 在指定位置开始 | 在指定位置结束 

例：

     // Create a red line in position 150
          ctx.strokeStyle="red";
          ctx.moveTo(150,20);
          ctx.lineTo(150,170);
          ctx.font = '14px 微软雅黑'
          ctx.stroke();
     // Show the different textAlign values
          ctx.textAlign="start";
          ctx.fillText("textAlign=start",150,60);
          ctx.textAlign="end";
          ctx.fillText("textAlign=end",150,80);
          ctx.textAlign="left";
          ctx.fillText("textAlign=left",150,100);
          ctx.textAlign="center";
          ctx.fillText("textAlign=center",150,120);
          ctx.textAlign="right";
          ctx.fillText("textAlign=right",150,140);

渐变效果

    createLinearGradient(x1,y1,x2,y2) // 创建渐变，x1，y1是渐变开始的位置，x2,y2是渐变结束的位置
    addColorStop(stop,color) // 用于设置渐变对象中的颜色和位置，stop的值范围从0-1，表示渐变中开始与结束之间的位置

例：

    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    var grd = ctx.createLinearGradient(0,0,200,200);
    grd.addColorStop(0.1, 'red');
    grd.addColorStop(0.3, 'yellow');
    grd.addColorStop(0.5, 'green');
    grd.addColorStop(0.7, 'orange');
    grd.addColorStop(1, 'pink');
    // 应用渐变
    ctx.fillStyle=grd;
    ctx.fillRect(20,20,150,100);

转移中心点

translate(x,y) // 重新映射画布上的(x,y)坐标位置

绘制图片

    ctx.drawImage(img,x,y) // 在画布上定位图像 img是要放置的图片 x，y是放置的坐标
    ctx.getImageData(x,y,w,h) // 拷贝画布中指定矩形的像素数据 x，y是坐标 w，h是大小
    ctx.putImageData(imgData,x,y) // 将图像数据放回画布上，imgdata为规定要放回画布的对象 x y是要放置的坐标