1.渐变填充
// 创建线性渐变对象-线性
const gradientLinear= ctx.createLinearGradient(0,0,0,0,0,10); //createRadialGradient(60, 60, 0, 60, 60, 50)径向
gradientLinear.addColorStop(0,"rgba(255,255,255,1)");
gradientLinear.addColorStop(0.3,"rgba(0,255,240,0.8)");
gradientLinear.addColorStop(0.5,"rgba(0,2405,255,0.8)");
gradientLinear.addColorStop(0.8,"rgba(0,208,255,0.8)");
gradientLinear.addColorStop(1,"rgba(10,176,214,1)");
// 填充线性渐变
contextLinear.fillStyle = gradientLinear;
contextLinear.fillRect(10, 10, 100, 100);
2.canvas混合模式 (globalCompositeOperation )
context.globalCompositeOperation = type;
3.裁剪 context.clip();
4.当前元素高亮或处于选中 focus context.drawFocusIfNeeded()
5.绘制椭圆 context.ellipse()
6.获取画布元素 context.getImageData()
7.获取当前虚线的样式 context.getLineDash()
8.检测某个点是否在当前路径中 context.isPointInPath()
9.检测对应的点是否在描边路径上,描边越粗,检测范围越大 context.isPointInStroke()
10.画布缩放 context.scale(x, y);
11.文字描边 context.strokeText(text, x, y [, maxWidth]);