Question

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

Answer 1

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

context.globalCompositeOperation =＆＃34;源极 - 在＆＃34;只会在现有文本和新形状重叠的地方绘制新图纸（任何非重叠区域都是透明的）。

以下是示例代码和演示：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>

如果你想在文本周围放一个矩形，你可以使用另一个复合（＆＃34; destination-over＆＃34;），它可以让你在现有像素下绘制新的形状

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

enter image description here

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

如果要保留背景，可以轻松创建屏幕外画布并在该临时画布上执行text-composite-drawImage。然后使用drawImage将临时画布绘制到可见画布上。这样你就可以获得剪辑文本并保留现有背景。

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

enter image description here

Answer 2

是否可以在当前路径中添加文字，例如剪辑？

简单的答案是否定的，文本路径不会通过画布上下文向我们展示，因此我们不能将它们用于裁剪等事情。

唯一的方法是：

使用复合模式＆＃34; punch＆＃34;文本的一个洞。与剪辑工作方式相同，但与路径相关的遮罩更多。
手动将字体中的文本路径提取为多边形，并将其与line，Bezier等一起使用。可以帮助提取字体路径的库可以是opentype.js。

在路径中添加文本

2 个答案: