How do you fill Text in Canvas with Image?

问题

I've been working with the HTML5 canvas recently and was wondering if there was a way to fill Text with an image instead of a solid color?

I can currently get something like this to work:

But I need the text to look something like (can be done in Photoshop):

I've read numerous times about sometimes having to render parts on an image on a 2nd canvas and importing the drawing to the main-visible canvas, but most of that was about tinting images (not sure if that would work here).

Why I need this: As you can see the controller above is nice and shinny, but the text isn't and the client wants me to pull the text color from the different controller shell colors to make it look at realistic as possible.

While searching some more I did happen to find this example, which is exactly what I want. But unfortunately the problem with the example is that I would then need to somehow export only the text of the image, which I don't think is possible, so it can be transposed into the new image without the black outer layer covering part of the controller.

If someone would please send me in the right direction, no matter how complex, I will greatly appreciate it.

P.S. Here if the draw Order of the controller:

Shell
Text
Parts/Back
Thumb Sticks
Guide Button
ABXY Buttons
Mask around controller (prevent text overflow)

回答1:

You can use compositing to replace the opaque text pixels with an overlaid image

This code uses context.globalCompositeOperation="source-in" to replace only the text pixels with the corresponding pixels of an image:

// 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);

Here is code and a Fiddle: 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>

来源：https://stackoverflow.com/questions/19268904/how-do-you-fill-text-in-canvas-with-image

标签

canvas

html5-canvas

typography