将文本添加到路径

在HTML5 CanvasRenderingContext2D中，是否可以向当前路径添加文本剪辑？将文本添加到路径

// rectangle clip 
context.beginPath(); 
context.rect(0,0,100,100); 
context.clip(); 

// clip to text 
context.beginPath(); 
context.text("HELLO WORLD", 0, 20); // this function does not exist 
context.clip();

来源

2014-03-13 Bart van Heukelom

是否有可能文本添加到当前路径，例如剪辑？

简单的答案是否定的，文本路径不会通过canvas背景暴露给我们，所以我们不能将它们用于诸如裁剪之类的东西。

的唯一方法是要么：

使用复合模式“冲”为文本的孔。与裁剪一样工作的方式很多，但与遮罩相关的不仅仅是路径。
手动从字体中提取文本路径作为多边形，并将其与行，贝塞尔等一起使用。可帮助提取字体路径的库可能为opentype.js。

来源

2014-03-13 19:58:24 K3N

可以使用合成绘制成文本（文本内的有效限幅到）

context.globalCompositeOperation =“源 - 在”将绘制新附图仅发生在exsiting文本和新的形状重叠（任何非重叠区域都是透明的）。

这里的示例代码和演示：http://jsfiddle.net/m1erickson/yWuw7/

enter image description here

<!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=new Image(); 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg"; 
    function start(){ 

     canvas.width=img.width; 
     canvas.height=img.height; 

     ctx.font="138 verdana"; 
     ctx.fillText("See the",20,150); 
     ctx.fillText("Sea",20,300); 
     ctx.globalCompositeOperation="source-in"; 
     ctx.drawImage(img,0,0); 

    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Water image clipped to text using Compositing.</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

如果你想要把一个矩形中的文本，然后你可以使用另一个复合（“目的地越过”），让你借鉴现有像素下新的形状

ctx.globalCompositeOperation="destination-over"; 
ctx.fillRect(15,20,275,150);

enter image description here

[加法：将裁剪文本到现有的背景]

如果你想保留的背景下，您可以轻松地创建屏幕外的画布，做文本复合的drawImage该临时画布上。然后使用drawImage将临时画布绘制到可见画布上。这样你就可以修剪文本并保留现有的背景。

演示：http://jsfiddle.net/m1erickson/n7x8y/

enter image description here

来源

2014-03-13 16:38:57 markE

这可能会派上用场，但是（纠正我，如果我错了），如果画布上已经有像素（背景），这不起作用。 –

是的，任何现有的像素都将受到复合操作的影响。如果要保留背景，可以轻松创建一个屏幕外的画布，然后在该临时画布上执行text-composite-drawImage。然后使用drawImage（offscreenCanvas，x，y）将临时画布绘制到可见画布上。这样你就可以修剪文本并保留现有的背景。祝你的项目好运！ – markE

将文本添加到路径

回答

相关问题