Question

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

我现在可以使用这样的东西：

What I can do

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

Example

我已经多次阅读过有时必须在第二个画布上的图像上渲染零件并将图形导入主要可见画布，但大部分是关于着色图像（不确定这是否可行）

为什么我需要这个：正如你可以看到上面的控制器很好而且很有光泽，但是文本不是，客户端希望我从不同的控制器外壳颜色中提取文本颜色，使其尽可能逼真

在搜索更多内容时，我碰巧找到this example，这正是我想要的。但不幸的是，这个例子的问题在于我需要以某种方式仅导出图像的文本，我认为这是不可能的，因此可以将其转换为新图像，而黑色外层不会覆盖部分控制器。

如果有人愿意让我朝着正确的方向发送，无论多么复杂，我都会非常感激。

P.S。这里如果控制器的绘制顺序：

壳牌
文本
零件/后退
Thumb Sticks
指南按钮
ABXY Buttons
控制器周围的掩码（防止文本溢出）

Answer 1

您可以使用合成来使用重叠图像替换不透明文本像素

enter image description here

此代码使用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);

这是代码和小提琴：http://jsfiddle.net/m1erickson/atM4m/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=document.createElement("img");
    img.onload=function(){
       draw();
    }
    img.src="http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";

    function draw(x){

      ctx.save();
      ctx.beginPath();

      // put text on canvas
      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);
      ctx.restore();
    }





}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

要使用模式填充文本，请使用以下代码：

  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-学习PHP，MySQL和JavaScript5-O’Reilly Media，Nixon Robin-（2018）

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

2 个答案: