javascript - 如何将图像用作用 Canvas 制作的文本的颜色

Question

这是一个通用的文本 Canvas :

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 85;
var y = 65;

context.font = '40pt Calibri';
context.lineWidth = 3;
context.strokeStyle = 'black';
context.strokeText('This is my text', x, y);
context.fillStyle = 'black';
context.fillText('This is my text', x, y);

如何使用图像作为其 strokeStyle 和 fillStyle 而不是黑色或任何颜色来创建该文本？

Answer 1

在 Canvas 上填充文本后，更改合成模式:

context.globalCompositeOperation = 'source-in';  /// or source-atop

然后在文本上绘制图像，只有文本会被图像替换。