将线性渐变应用于CanvasPattern（Canvas API）

Question

我有一个重复的简单图案，一个渐变超出了图案的尺寸。可以将线性渐变应用于渲染的图案吗？

我尝试了以下操作，但它实际上并未像我期望的那样绘制渐变：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#00ff00');

const patternCanvas = document.createElement('canvas');
const patternContext = patternCanvas.getContext('2d');

patternCanvas.height = 10;
patternCanvas.width = 10;
patternContext.fillStyle = gradient; // this doesn't work as expected
patternContext.arc(5, 5, 2.5, 0, Math.PI * 2);
patternContext.fill();

const pattern = context.createPattern(patternCanvas, 'repeat');

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

<canvas id = 'canvas'>

Answer 1

CanvasPattern仅保存一个位图，即像素。除了对其进行变换（例如在移动，缩放，旋转中）之外，您无法使其动态更改。

因此，您要使用相同的图案形状但要使用渐变填充的想法仅适用于CanvasPattern。

但是，分两步实现还是很简单的：

[每次您要绘制此渐变图案时，都将首先将图案填充为纯色，然后将复合操作更改为source-in，然后应用渐变。

const ctx = createCanvasContext2d( 500, 500 );
document.body.append( ctx.canvas );
const pat = createPattern();
const grad = ctx.createLinearGradient( 0, 0, 500, 500);
grad.addColorStop( 0, 'red' );
grad.addColorStop( 0.5, 'yellow' );
grad.addColorStop( 1, 'blue' );

ctx.arc( 250, 250, 250, 0, Math.PI*2 );
// first the pattern
ctx.fillStyle = pat;
ctx.fill();
// change the composite operation
ctx.globalCompositeOperation = 'source-in';
// now draw the gradient
ctx.fillStyle = grad;
ctx.fill();
// reset to default
ctx.globalCompositeOperation = 'source-over';

function createPattern() {
  // we create a small canvas context just for the pattern
  const pattern_ctx = createCanvasContext2d( 20, 20 );
  // simply a black circle
  pattern_ctx.arc( 10, 10, 5, Math.PI*2, 0 );
  pattern_ctx.fill();
  return pattern_ctx.createPattern( pattern_ctx.canvas, 'repeat' );
}

function createCanvasContext2d( width=300, height=width||150 ) {
  const canvas = document.createElement( 'canvas' );
  canvas.width = width;
  canvas.height = height;
  return canvas.getContext( '2d' );
}

但是这种方法的缺点是，此操作需要您有一个清晰的上下文，因为绘制渐变时不透明的所有内容都会被填充，不填充区域中的所有内容都将被删除：

const ctx = createCanvasContext2d( 500, 500 );
document.body.append( ctx.canvas );
const pat = createPattern();
const grad = ctx.createLinearGradient( 0, 0, 500, 500);
grad.addColorStop( 0, 'red' );
grad.addColorStop( 0.5, 'yellow' );
grad.addColorStop( 1, 'blue' );

// draw a green rect both in and out of our future gradient pattern
ctx.fillStyle = 'green';
ctx.fillRect(0,0,150,150);

ctx.arc( 250, 250, 250, 0, Math.PI*2 );
// first the pattern
ctx.fillStyle = pat;
ctx.fill();
// change the composite operation
ctx.globalCompositeOperation = 'source-in';
// now draw the gradient
ctx.fillStyle = grad;
ctx.fill();
// reset to default
ctx.globalCompositeOperation = 'source-over';

function createPattern() {
  // we create a small canvas context just for the pattern
  const pattern_ctx = createCanvasContext2d( 20, 20 );
  // simply a black circle
  pattern_ctx.arc( 10, 10, 5, Math.PI*2, 0 );
  pattern_ctx.fill();
  return pattern_ctx.createPattern( pattern_ctx.canvas, 'repeat' );
}

function createCanvasContext2d( width=300, height=width||150 ) {
  const canvas = document.createElement( 'canvas' );
  canvas.width = width;
  canvas.height = height;
  return canvas.getContext( '2d' );
}

为了避免这种情况，您可以保留仅用于进行这种合成操作的第二个上下文，并且可以使用drawImage在主上下文上进行绘制。

const ctx = createCanvasContext2d( 500, 500 );
document.body.append( ctx.canvas );

const compositing_ctx = createCanvasContext2d( 500, 500 );

const pat = createPattern();
const grad = ctx.createLinearGradient( 0, 0, 500, 500);
grad.addColorStop( 0, 'red' );
grad.addColorStop( 0.5, 'yellow' );
grad.addColorStop( 1, 'blue' );

// draw a green rect both in and out of our future gradient pattern
ctx.fillStyle = 'green';
ctx.fillRect(0,0,150,150);

// make the compositing on the off-screen context
compositing_ctx.arc( 250, 250, 250, 0, Math.PI*2 );
compositing_ctx.fillStyle = pat;
compositing_ctx.fill();
compositing_ctx.globalCompositeOperation = 'source-in';
compositing_ctx.fillStyle = grad;
compositing_ctx.fill();
compositing_ctx.globalCompositeOperation = 'source-over';
// draw to main
ctx.drawImage( compositing_ctx.canvas, 0, 0 );

// And a small red one?
compositing_ctx.clearRect( 0, 0, 500, 500 );
compositing_ctx.beginPath();
compositing_ctx.rect( 350, 0, 150, 150 );
compositing_ctx.fillStyle = pat;
compositing_ctx.fill();
compositing_ctx.globalCompositeOperation = 'source-in';
compositing_ctx.fillStyle = "red";
compositing_ctx.fill();
compositing_ctx.globalCompositeOperation = 'source-over';
// draw to main
ctx.drawImage( compositing_ctx.canvas, 0, 0 );


function createPattern() {
  // we create a small canvas context just for the pattern
  const pattern_ctx = createCanvasContext2d( 20, 20 );
  // simply a black circle
  pattern_ctx.arc( 10, 10, 5, Math.PI*2, 0 );
  pattern_ctx.fill();
  return pattern_ctx.createPattern( pattern_ctx.canvas, 'repeat' );
}

function createCanvasContext2d( width=300, height=width||150 ) {
  const canvas = document.createElement( 'canvas' );
  canvas.width = width;
  canvas.height = height;
  return canvas.getContext( '2d' );
}