如何在画布中用图像填充文本？ [英] How do you fill Text in Canvas with Image?
问题描述
我最近一直在使用HTML5画布，并且想知道是否存在一种用图像而不是纯色填充文本的方法？
我可以当前可以使用类似的方法来工作：
但是我需要使文本看起来像（可以在Photoshop中完成）：
我有时读过很多遍必须在第二个画布上的图像上渲染零件并将图形导入到主要可见的画布中，但这主要是关于为图像着色（不确定是否可以在此处使用）。
为什么我需要这样做：如您所见，上面的控制器很漂亮而且很灵巧，但是文本不是，并且客户希望我从不同的控制器外壳颜色中提取文本颜色，以使其看起来更逼真
在搜索更多内容时，我做了哈ppen查找
<！doctype html>
< html>
< head>
< link rel = stylesheet type = text / css media = all href = css / reset.css /> <！-重置CSS->
< script type = text / javascript src = http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
#canvas {border：1px纯红色；}
< / 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\"；
函数draw（x）{
ctx.save（）;
ctx.beginPath（）;
//将文字放在画布上
ctx.font = 72pt Verdana;
ctx。 fillText（ XBOX，10,100）;
ctx.fill（）;
//使用合成绘制背景图像
//仅在文本已绘制
ctx.beginPath（）;
ctx.globalCompositeOperation = source-in;
ctx.drawImage（img，0,0）;
ctx.restore（ ）;
}
}）； //结尾$（function（）{}）;
< / script>
< / head>
< body>
< canvas id = canvas width = 300 height = 300< / canvas>
< / body>
< / html>
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)
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>
这篇关于如何在画布中用图像填充文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
