Canvas--填充样式

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位置显示的颜色值

const grd = context.createLinearGradient(50,50,200,50)
grd.addColorStop(0,'#a1c4fd')
grd.addColorStop(1,'#c2e9fb')

context.fillStyle = grd
context.fillRect(50,50,200,150)

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

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

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

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

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

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

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

const grd = context.createRadialGradient(200,150,0,200,150,100)
grd.addColorStop(0,'#d4fc79')
grd.addColorStop(1,'#96e6a1')

context.fillStyle = grd
context.arc(200,150,100,0,2*Math.PI)
context.fill()

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

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

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

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

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

const createCanvas = ()=>{
    const CANVAS = document.createElement('canvas')
    CANVAS.width = 100
    CANVAS.height = 100
    const ctx = CANVAS.getContext('2d')

    const grd = ctx.createLinearGradient(0,0,100,0)
    grd.addColorStop(0,'#a1c4fd')
    grd.addColorStop(1,'#c2e9fb')

    ctx.fillStyle = grd
    ctx.fillRect(0,0,100,100)

    return CANVAS
}

const backCanvas = createCanvas()
const pattern = context.createPattern(backCanvas, 'repeat')
context.fillStyle = pattern;
context.fillRect(0, 0, 400, 300);