Canvas 如何用图像填充画布中的文本？

我最近一直在使用HTML5画布，想知道是否有一种方法可以用图像而不是纯色填充文本

目前，我可以使用类似的方法：

但我需要文本看起来像（可以在Photoshop中完成）：

我读过很多次关于有时必须在第二个画布上渲染图像上的部分并将图形导入主可见画布的内容，但大部分内容都是关于对图像着色的（不确定这是否适用）

为什么我需要这个：正如你所看到的，上面的控制器很漂亮，闪闪发光，但是文本不是，客户希望我从不同的控制器外壳颜色中提取文本颜色，使其看起来尽可能真实

在寻找更多的时候，我碰巧找到了，这正是我想要的。但不幸的是，这个例子的问题是，我需要以某种方式只导出图像的文本，我认为这是不可能的，因此它可以被转置到新图像中，而不需要覆盖控制器部分的黑色外层

如果有人能告诉我正确的方向，无论有多复杂，我都会非常感激

如果控制器的绘制顺序为：

壳

正文

零件/背面

拇指棒

导向按钮

ABXY按钮

控制器周围的掩码（防止文本溢出）

---

可以使用合成将不透明文本像素替换为覆盖图像

此代码使用context.globalCompositeOperation=“source in”仅将文本像素替换为图像的相应像素：

// put text on canvas
ctx.beginPath();
ctx.font="72pt Verdana";
ctx.fillText("XBOX",10,100);
ctx.fill();


// use compositing to draw the background image
// only where the text has been drawn
ctx.beginPath();
ctx.globalCompositeOperation="source-in";
ctx.drawImage(img,0,0);

下面是代码和小提琴：

正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=document.createElement（“img”）；
img.onload=函数（）{
draw（）；
}
img.src=”http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";
函数图（x）{
ctx.save（）；
ctx.beginPath（）；
//将文本放在画布上
ctx.font=“72pt Verdana”；
ctx.fillText（“XBOX”，10100）；
ctx.fill（）；
//使用合成绘制背景图像
//仅在已绘制文本的位置
ctx.beginPath（）；
ctx.globalCompositeOperation=“来源于”；
ctx.drawImage（img，0,0）；
ctx.restore（）；
}
}); // end$（函数（）{}）；

要用模式填充文本，我使用以下方法：

  canvas               = document.getElementById("myCanvas")
  context              = canvas.getContext('2d')
  context.font         = 'bold 140px Times'
  context.textBaseline = 'top'
  image                = new Image()
  image.src            = 'myImage.jpg'

  image.onload = function()
  {
    pattern           = context.createPattern(image, 'repeat')
    context.fillStyle = pattern
    context.fillText(  'XBOX', 0, 0)
  }

---

参考：通过jQuery、CSS和HTML5-O'Reilly媒体学习PHP、MySQL和JavaScript，尼克松罗宾-（2018）

非常感谢。看起来没那么难，只是不知道beginPath和globalCompositeOperation.Yep。Html画布并没有那么难。而且它确实有很多隐藏的功能…如果您想了解更多，请查看此网站上的功能演示：祝您的项目好运！：）

  canvas               = document.getElementById("myCanvas")
  context              = canvas.getContext('2d')
  context.font         = 'bold 140px Times'
  context.textBaseline = 'top'
  image                = new Image()
  image.src            = 'myImage.jpg'

  image.onload = function()
  {
    pattern           = context.createPattern(image, 'repeat')
    context.fillStyle = pattern
    context.fillText(  'XBOX', 0, 0)
  }