将线性渐变应用于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' );
}