Canvas--填充样式

Posted 2020-10-13 穿山甲到底说了什么

1、线性渐变：createLinearGradient(x0,y0,x1,y1)

　　x0----渐变开始点的 x 坐标。

　　y0----渐变开始点的 y 坐标。

　　x1----渐变结束点的 x 坐标。

　　y1----渐变结束点的 y 坐标。

　　createLinearGradient() 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。

　　Tips：渐变对象可以作为 strokeStyle 或 fillStyle 属性的值。

　　Tips：使用 addColorStop(stop,color) 方法添加不同的颜色，以及在 gradient 对象中的何处定位颜色。

　　　stop：取值0.0~1.0，表示渐变中开始与结束之间的位置

　　　color：在stop位置显示的颜色值

1 const grd = context.createLinearGradient(50,50,200,50)
2 grd.addColorStop(0,\'#a1c4fd\')
3 grd.addColorStop(1,\'#c2e9fb\')
4 
5 context.fillStyle = grd
6 context.fillRect(50,50,200,150)

2、径向渐变：createRadialGradient(x0,y0,r0,x1,y1,r1)

　　x0----渐变的开始圆的 x 坐标。

　　y0----渐变的开始圆的 y 坐标。

　　r0----开始圆的半径。

　　x1----渐变的结束圆的 x 坐标。

　　y1----渐变的结束圆的 y 坐标。

　　r1----结束圆的半径。

1 const grd = context.createRadialGradient(200,150,0,200,150,100)
2 grd.addColorStop(0,\'#d4fc79\')
3 grd.addColorStop(1,\'#96e6a1\')
4 
5 context.fillStyle = grd
6 context.arc(200,150,100,0,2*Math.PI)
7 context.fill()

3、createPattern(image,"repeat-style")：createPattern() 方法在指定的方向内重复指定的元素。

　　image----规定要使用的模式的图片、画布或视频元素。

　　repeat-style----元素的重复方式。

1 const IMAGE = new Image();
2 IMAGE.src = \'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png\';
3 IMAGE.onload = function() {
4   var pattern = context.createPattern(IMAGE, \'repeat-x\');
5   context.fillStyle = pattern;
6   context.fillRect(0, 0, 400, 300);
7 }

　　元素还可以是图片、视频，或者其他 <canvas> 元素：

 1 const createCanvas = ()=>{
 2     const CANVAS = document.createElement(\'canvas\')
 3     CANVAS.width = 100
 4     CANVAS.height = 100
 5     const ctx = CANVAS.getContext(\'2d\')
 6 
 7     const grd = ctx.createLinearGradient(0,0,100,0)
 8     grd.addColorStop(0,\'#a1c4fd\')
 9     grd.addColorStop(1,\'#c2e9fb\')
10 
11     ctx.fillStyle = grd
12     ctx.fillRect(0,0,100,100)
13 
14     return CANVAS
15 }
16 
17 const backCanvas = createCanvas()
18 const pattern = context.createPattern(backCanvas, \'repeat\')
19 context.fillStyle = pattern;
20 context.fillRect(0, 0, 400, 300);