canvas基本概念

标签：canvas dpr 路径 ctx 像素 绘制 基本概念

基本概念

1.路径

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

2.beginPath

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

3.closePath

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

4.save和restore

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

5.设备像素比

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

 1 function getCtx(canvas) {
 2     const ctx = canvas.getContext("2d");
 3     const dpr = window.devicePixelRatio;
 4     const { width: w, height: h } = canvas.getBoundingClientRect();
 5     canvas.width = w * dpr;
 6     canvas.height = h * dpr;
 7     ctx.scale(dpr, dpr);
 8 
 9     return ctx;
10 }

6.填充规则

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

7.绘制习惯

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

1 ctx.save();
2 ctx.beginPath();
3 ...
4 ctx.restore();

8.重叠规则

重叠规则主要有source类型和destination类型，分别有四种显示方式：over、atop、in、out，例如source-over、destination-over；还有一个lighter，表示颜色合并，比如red和blue的交界处是pink。

9.略

标签：canvas,dpr,路径,ctx,像素,绘制,基本概念
From： https://www.cnblogs.com/aurora-power/p/17214812.html