canvas之fillStyle

Posted 2020-11-19 wumon

菜鸟canvas  

首先：

　　var  cvs = document.getElementById("canvas");

　　var  ctx = cvs.getContext("2d");

　　ctx.fillStyle = wumon;

　　那么这里的wumon是什么呢？

　　ctx.fillStyle = color | grdient | pattern;

　　color，十六进制、rgb、rgba、HSL、HSLA······。

　　gradient，有两种：

　　　　线性：ctx.createLinearGradient(x,y,x1,y1);其中x、y为渐变开始的坐标，x1、y1为渐变结束时坐标;

　　　　放射：ctx.createRadialGradient(x,y,r,x1,y1,r1);其中x、y、r为渐变开始坐标及半径，x1、y1、r1为渐变结束坐标及半径;

　　　　同时还有一个addColorStop(stop,color);用来配合渐变使用，stop为0.0-1.0之间值，color为stop颜色，addColorStop可多次调用来调节渐变。

　　　　示例：

　　　　　　　var linear = ctx.createLinearGradient(x,y,x1,y1);

　　　　　　　linear.addColorStop(0,"red");

　　　　　　　linear.addColorStop(1,"blue");

　　　　　　　ctx.fillStyle = linear;

　　pattern，

　　　　ctx.createPattern(imageEle,"repeat" | "repeat-x" | "repeat-y" | "no-repeat");

　　　　示例：

　　　　　　var img = document.getElementById("img");

　　　　　　var pat = ctx.createPattern(img,"repeat");

　　　　　　ctx.fillStyle = pat;