canvas基本概念
基本概念
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.globalCompositeOperation
source主体和destination主体分别有四种显示方式:over、atop、in、out,例如source-over、destination-over;lighter表示颜色合并,比如red和blue的交界处是pink。