学习Canvas基础-圆柱渐变、设置底纹（createPattern）

1、圆柱渐变

//	createconicgradient()方法在给定坐标的点周围创建渐变。
//	createConicGradient(startAngle, x, y)
//	参数：
//	startAngle--开始渐变的角度，以弧度为单位。角度测量从中心上方垂直开始，顺时针移动。
//	x--梯度中心的x轴坐标。
//	y--梯度中心的y轴坐标。

事例

//  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    //  createConicGradient(开始渐变角度，圆心X，圆心Y)
    var gradient = ctx.createConicGradient(Math.PI/2, 250, 250)
    gradient.addColorStop(0, 'blue')
    gradient.addColorStop(0.5, 'yellow')
    gradient.addColorStop(1, 'red')
    ctx.fillStyle = gradient
    ctx.arc(250,250,150, 0, Math.PI*2 )
    ctx.fill()

2、设置底纹

createPattern它通过 repetition 参数在指定的方向上重复元图像
ctx.createPattern(image, repetition)
image
    // 作为重复图像源的 CanvasImageSource 对象。可以是下列之一：
  	<img>,
  	<video>
    <canvas>
repetition
	// DOMString，指定如何重复图像。允许的值有：
    "repeat" (both directions),
    "repeat-x" (horizontal only),
    "repeat-y" (vertical only),
    "no-repeat" (neither).
	// 注意：如果为空字符串 ('') 或 null (但不是 undefined)，repetition 将被当作"repeat"。

事例

repetition的值为repeat / null / ’ '状态，为平铺满

 //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    //  createConicGradient(开始渐变角度，圆心X，圆心Y)
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
    img.onload = function () {
      // createPattern()
      var pattern = ctx.createPattern(img, 'repeat');
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, 500, 500);
    }; 

repetition的值为repeat-x状态，为沿着X轴平铺

 //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    //  createConicGradient(开始渐变角度，圆心X，圆心Y)
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
    img.onload = function () {
      // createPattern()
      var pattern = ctx.createPattern(img, 'repeat-x');
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, 500, 500);
    }; 

repetition的值为repeat-x状态，为沿着y轴平铺

 //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    //  createConicGradient(开始渐变角度，圆心X，圆心Y)
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
    img.onload = function () {
      // createPattern()
      var pattern = ctx.createPattern(img, 'repeat-y');
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, 500, 500);
    }; 

repetition的值为no-repeat状态

 //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    //  createConicGradient(开始渐变角度，圆心X，圆心Y)
    var img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
    img.onload = function () {
      // createPattern()
      var pattern = ctx.createPattern(img, 'no-repeat');
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, 500, 500);
    };