canvas之fillStyle

为什么strokeStyle和fillStyle属性不叫做strokeColor和strokeColor?
因为stroke或fill不局限于color，还可以是渐变色或图案

纯色

let canvas = document.getElementById('canvas'),
  ctx = canvas.getContext("2d");
  ctx.fillStyle = "#fff000";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);

渐变

渐变分为线性渐变和径向渐变

线性渐变

let linearGradient = ctx.createLinearGradient(startX, startY, endX, endY);

起始坐标点(startX, startY)与结束坐标点(endX, endY)之间的连线就是canvas建立颜色渐变效果的依据

linearGradient.addColorStop(0.5, "#fff000");

addColorStop接受以下两个参数:

颜色停止点在渐变线段上的位置，区间为0～1.0
颜色

当渐变色中的最后一个颜色所在位置点<1.0时，会用最后一个颜色来填充剩余部分

径向渐变

与线性渐变不同的是，创建线性渐变时需要指定一条渐变线，而创建径向渐变需要指定两个圆

let radialGradient = createRadialGradient(startX, startY, startR, endX, endY, endR);

前三个参数代表第一个圆的信息，后三个参数代表第二个圆的信息
圆心坐标:(x, y)
圆半径:r

图案

createPattern方法接受两个参数(a, b)

a: 图案本身，可以是HTMLImageElement/HTMLCanvasElement/HTMLVideoElement元素
b: 重复方式，可以是repeat/repeat-x/repeat-y/no-repeat

HTMLImageElement

let canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  image = new Image();
image.src = '图片资源地址';
image.onload = () => {
  var pattern = ctx.createPattern(image, "repeat");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

HTMLCanvasElement

let canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  patternCanvas = document.createElement("canvas"),
  patternCanvasCtx = patternCanvas.getContext("2d"),
  pattern;

patternCanvas.width = 40;
patternCanvas.height = 40;

patternCanvasCtx.beginPath();
patternCanvasCtx.arc(20, 20, 20, 0, Math.PI * 2, false);
patternCanvasCtx.fillStyle = "#fff000";
patternCanvasCtx.fill();

pattern = ctx.createPattern(patternCanvas, "repeat");

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);

HTMLVideoElement

let canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  video = document.createElement("video"),
  pattern = ctx.createPattern(video, "repeat");

video.src = "视频资源地址";
video.muted = true;
video.autoplay = true;

video.addEventListener("canplaythrough", item => {
  video.play();
  fillVideoPattern();
  function fillVideoPattern() {
    var pattern = ctx.createPattern(video, "repeat");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(fillVideoPattern);
  };
});

发布于 2018-12-28 19:21

HTML5

Canvas