如何在画布中用图像填充文本？
Ste*_*172 0 typography canvas html5-canvas
我最近一直在使用HTML5画布，想知道是否有一种方法可以用图像而不是纯色填充文本？
我目前可以得到类似的工作：
但是我需要文本看起来像（可以在Photoshop中完成）：
我读过很多遍关于有时必须在第二个画布上的图像上渲染零件并将图形导入到主要可见的画布中的信息，但大部分内容都是关于为图像着色（不确定是否可以在此处使用）。
我为什么需要这个：如您所见，上面的控制器很漂亮而且很灵巧，但是文本不是，客户希望我从不同的控制器外壳颜色中提取文本颜色，以使其看起来尽可能逼真。
在搜索更多内容时，我确实找到了这个示例，这正是我想要的。但不幸的是，该示例的问题在于我将需要以某种方式仅导出图像的文本，而我认为这是不可能的，因此可以将其转换为新图像，而黑色外层不会覆盖图像的一部分。控制器。
如果有人希望以正确的方向发送给我，无论多么复杂，我将不胜感激。
PS这里是控制器的绘制顺序：
- 贝壳
- 文本
- 零件/背部
- 拇指棒
- 引导按钮
- 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);
这是代码和小提琴：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>
| 归档时间： |
|
| 查看次数： |
2741 次 |
| 最近记录： |