canvas基本概念

基本概念

1.路径

canvas的路径存放在路径列表里，在调用绘制命令的时候依次绘制。

2.beginPath

beginPath表示一段路径的开始，在使用beginPath以后，重新开始填充路径队列。

3.closePath

closePath表示闭合一段路径，闭合的节点是上一个moveTo的位置。

4.save和restore

save和restore可以避免绘制状态的频繁设置。

5.设备像素比

设备像素比是指浏览器像素和真实像素的大小比例，css用的是浏览器像素，canvas用的是真实像素，canvas像素经过css像素缩放后就会存在失真；为此，因该想办法抵消掉设备像素比：

function getCtx(canvas) {
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio;
    const { width: w, height: h } = canvas.getBoundingClientRect();
    canvas.width = w * dpr;
    canvas.height = h * dpr;
    ctx.scale(dpr, dpr);

    return ctx;
}

6.填充规则

填充规则有evenodd和nonzero两种。假设有一个闭合路径C和一个点P，从点P画一条射线，路径穿过射线有正反两个方向，假设正向+1，反向-1；那么，evenodd表示结果为奇数就填充，nonzero表示结果不为零就填充。

7.绘制习惯

一部分绘制状态会在前一次的基础上叠加，例如translate、rotate等；因此最好的做法是，每一次绘制都先save，绘制完毕再restore：

ctx.save();
ctx.beginPath();
...
ctx.restore();

8.globalCompositeOperation

source主体和destination主体分别有四种显示方式：over、atop、in、out，例如source-over、destination-over；lighter表示颜色合并，比如red和blue的交界处是pink。

9.略