将文本添加到路径答案

【问题标题】：Add text to the path将文本添加到路径
【发布时间】：2014-04-18 10:52:15
【问题描述】：

在 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();

【问题讨论】：

标签： html canvas html5-canvas clipping

【解决方案1】：

您可以使用合成来绘制到文本中（有效地剪切到文本内部）

context.globalCompositeOperation="source-in" 将仅在现有文本和新形状重叠的地方绘制新图形（任何不重叠的区域都变为透明）。

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

<!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>

如果您想在文本周围放置一个矩形，您可以使用另一个复合（“destination-over”），让您在现有像素下绘制新形状

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

[添加：将剪切的文本应用到现有背景]

如果您想保留背景，您可以轻松地创建一个屏幕外画布并在该临时画布上执行 text-composite-drawImage。然后使用 drawImage 将临时画布绘制到可见画布上。这样一来，您就有了剪裁的文本，并保留了现有的背景。

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

【讨论】：

这有时可能会派上用场，但是（如果我错了，请纠正我）如果画布上已经有像素（背景），这将不起作用。
是的，任何现有的像素都会受到合成操作的影响。如果您想保留背景，您可以轻松地创建一个屏幕外画布并在该临时画布上执行 text-composite-drawImage。然后使用 drawImage(offscreenCanvas,x,y) 将临时画布绘制到可见画布上。这样你就有了你的剪辑文本加上保留现有的背景。祝你的项目好运！

【解决方案2】：

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

简单的答案是否定的，文本路径不会通过画布上下文暴露给我们，因此我们不能将它们用于诸如剪辑之类的事情。

唯一的方法是：

使用复合模式为文本“打孔”。工作方式与剪辑大致相同，但与遮罩的关系比路径更多。
手动将字体中的文本路径提取为多边形，并将其与线条、Bezier 等一起使用。可以帮助提取字体路径的库可以是 opentype.js。

【讨论】：