canvas

canvas元素是h5的一部分，使用js在网页上绘制图像，canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<!-- 画布白色，并且默认大小300 * 150，不建议在 CSS 中设置大小 -->
<canvas width="500" height="500"></canvas>
<script>
    var myCanvas = document.querySelector('canvas'),
        ctx = myCanvas.getContext('2d');   // 获取上下文，绘制工具箱

    // 使用工具进行绘画，一条直线
    ctx.moveTo(100,100.5);    // 画笔默认在 (0,0) 位置，将其移动到目标位置
    ctx.lineTo(200,100.5);    // 绘制直线，仅仅是轨迹（绘制路径），所以看不到
    ctx.stroke();             // 描边
</script>

在css设置canvas大小会拉伸画布从而令图画也被拉伸
线条默认的宽度是1px，默认的颜色是黑色，之所以会变成2px和灰色，线条在刻度中间绘制，也就是上个像素点的一半和下个像素点的一半，因为是占一半没有饱和所以显示灰色，又因为无法显示0.5px，所以变成2px
只要往上或往下移动0.5即可解决上面问题,线宽是偶数的话则不需要偏移0.5

设置直线颜色和宽度

<canvas width="500" height="500"></canvas>
<script>
    var myCanvas = document.querySelector('canvas'),
        ctx = myCanvas.getContext('2d'); 

    // 使用工具进行绘画，一条直线
    ctx.moveTo(100,100.5); 
    ctx.lineTo(200,100.5); 
    ctx.stroke();

    // 设置颜色和直线宽度
    ctx.beginPath();          // 开启新路径，解决样式覆盖问题
    ctx.moveTo(100,200.5);
    ctx.lineTo(200,200.5);
    ctx.strokeStyle = '#c21500';
    ctx.lineWidth = 3;
    ctx.stroke();
</script>

绘制三角形

<canvas width="500" height="500"></canvas>
<script>
    var myCanvas = document.querySelector('canvas'),
        ctx = myCanvas.getContext('2d');   // 获取上下文，绘制工具箱

    ctx.moveTo(100,300.5);
    ctx.lineTo(200,300.5);
    ctx.lineTo(100,400);
    // ctx.lineTo(100,300.5);
    ctx.closePath();  // 自动闭合，会根据起始点来自动闭合
    ctx.lineWidth = 10;
    ctx.stroke();
    // ctx.fill();  填充，画轨迹后可选择怎么处理轨迹，是描边还是填充
</script>

镂空正方形

    ctx.beginPath();
    ctx.moveTo(100, 500);
    ctx.lineTo(200, 500);
    ctx.lineTo(200, 600);
    ctx.lineTo(100, 600);
    ctx.closePath();
    ctx.fillStyle = '#09c';
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(150, 520);
    ctx.lineTo(180, 580);
    ctx.lineTo(120, 580);
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.fill();

虚线

    // setLineDash(),参数必须放一个数组，数组元素1表宽度，元素2表间距
    // 数组元素为偶数时，才会重复地显示，否则会出现颜色不一致的情况
    // lineDashOffset 为虚线开始绘制时的偏移距离，正向左偏，负向右偏
    ctx.beginPath();
    ctx.moveTo(100, 600);
    ctx.lineTo(200,600);
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'purple';
    ctx.setLineDash([4,2]);
    ctx.lineDashOffset = 2;
    ctx.stroke();

渐变色

    ctx.lineWidth = 30;
    for(var i = 0; i < 255; i++){
        ctx.moveTo(300 + i,100);
        ctx.lineTo(400 + i,100);  // 横坐标要比300大，甚至301就可以了，反正后面的画会覆盖前面
        ctx.strokeStyle = 'rgba('+i+','+ i +','+ i +')';
        ctx.stroke();
        ctx.beginPath();
    }

矩形，有专门的 api 用来绘制矩形

// rect(x,y,w,h) 没有独立路径，之后若不 beginPath() 则会影响后面图形的绘制
ctx.rect(300, 180, 60, 40);
ctx.strokeStyle = '#FF5722';
ctx.stroke();

ctx.strokeRect(400, 180, 60, 40);  // 描边矩形，有独立路径，不会影响其他，自己也不会被影响

ctx.fillStyle = '#FFB800';
ctx.fillRect(500, 180, 60, 40);     // 填充矩形，有独立路径
// ctx.clearRect(x,y,w,h)  擦除矩形区域,该区域下的所有图案都会被擦除

弧度
** 弧度是角的度量单位，弧长等于半径的弧，所对圆心角为1弧度，一个圆有 2πr/r = 2π 个弧度，一个圆360度，所以一弧度为 180/π **

// arc(x,y,r,起始弧度,结束弧度,绘制方向顺时针false逆时针true)，默认 false
ctx.strokeStyle = '#5FB878';
ctx.arc(340,340,50,0,Math.PI * 2);
ctx.stroke();

扇形
要先设置起始点（画笔移动到圆心，否则无法自动闭合）

ctx.arc(340, 500, 50, Math.PI, Math.PI * 3 / 2);
ctx.closePath();
ctx.stroke();

文本
strokeText() 和 fillText() 都有4个参数(text,x,y,[maxWidth])，maxWidth 为文本所占位置的最大宽度

ctx.font = '26px poppin';
ctx.strokeText('描边文本',340,560.5);
ctx.fillText('填充文本',340,600.5);

样式设置
设置样式，画笔的状态
● lineWidth 线宽，默认1px
● lineCap 线末端类型：(butt默认)、round、square
● lineJoin 相交线的拐点 miter(默认)、round、bevel
● strokeStyle 线的颜色
● fillStyle 填充颜色
● setLineDash() 设置虚线
ctx.setLineDash([10,5,8]); //数组用来描述排列方式
● getLineDash() 获取虚线宽度集合
● lineDashOffset 设置虚线偏移量（负值向右偏移）

文本样式
ctx.textAlign 文本水平对齐方式，相对绘制坐标left、center、right、start(默认)、end
ctx.direction 属性css(rtl ltr) start和end于此相关，如果是ltr，start和left表现一致，如果是rtl，start和right表现一致
ctx.textBaseline 设置基线（垂直对齐方式 ）
top，文本的基线处于文本的正上方，并且有一段距离
middle，文本的基线处于文本的正中间
bottom，文本的基线处于文本的证下方，并且有一段距离
hanging，文本的基线处于文本的正上方，并且和文本粘合，作为印度文基线
alphabetic，默认值，基线处于文本的下方，并且穿过文字，英文基线
ideographic，中文基线，和bottom相似，但是不一样
measureText() 获取文本宽度obj.width

新建 ctx2 = myCanvas.getContent('2d'); 后线条颜色宽度等设置依旧没重置

绘制网格

绘制坐标系

绘制点

绘制图片
加载图片到内存的两种方式
var img = document.createElement('img');
img.src = 'psb.jpg';
或者
var image = new Image(); // 和上面没区别
image.src = 'psb.jpg';

<canvas width="600" height="600"></canvas>
<script>
    var ctx = document.querySelector('canvas').getContext('2d');

    // 1.创建对象
    var image = new Image();

    // 2.绑定加载完成事件，必须要等到图片加载完毕，因为是通过路径引入，所以可能图片的加载快过事件的绑定
    image.onload = function () {
        ctx.drawImage(image, 100, 100, 100, 100, 300, 200, 50, 50);
    };

    // 3.设置图片路径
    image.src = 'psd.jpeg';

    /**
     * canvas 的 drawImage() 方法
     * drawImage(img,x,y)  img 可以是图片、canvas对象或 video 对象，xy为画布上的坐标，这样放置的 img 会是原始尺寸
     * drawImage(img,x,y,w,h)  wh 为绘制的尺寸，是设置宽高，不是截取
     * drawImage(img,x,y,w,h,x1,y1,w1,h1)
     * x,y,w,h 是原图上的一个矩形区域
     * x1,y1,w1,h1 是画布上的一个矩形区域
     * 将原图上选定的矩形区域图像显示到画布指定的矩形区域
     * 若 w1h1 大于 wh ,则这区域的图像会被等比放大，同理，相等则是原尺寸，小于则是等比缩小
     * */
</script>