logo标签列表

如何在HTML5画布中剪切文本的一部分？

htmlhtml5-canvas
8
我有一个在HTML5画布上绘制的文本。如何剪切或隐藏文本左侧的部分？
在这个例子中，“HELLO”一词的部分被剪掉了，只留下了红线右侧的部分。
有两个限制条件： 1. 所有内容都要绘制在同一个画布上，不能创建新的画布。 2. 在我的实际工作中，红色线是图表的y轴。红线左侧是轴的标签。因此，想象一下那一侧绘制了一些东西，并且它们需要显示。那一部分不能被阻挡或删除。 enter image description here
3个回答
8

除了Jarrod的有用技巧，还可以在绘制文本时使用裁剪区域。

例如，如果您的y轴在30像素处，这个裁剪区域将不会在30像素左侧绘制文本。

ctx.rect(30,0,canvas.width-30,canvas.height);
ctx.clip();

然后fillText会使y轴左边的任何东西保持不变（导致你的“-ELLO”）。
ctx.fillText(theText,20,50);

以下是翻译的结果，仅供参考：

以下是代码和示例链接：http://jsfiddle.net/m1erickson/Q5Pfa/

<!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");

    clipTextToGrid(50,"HELLO","48px verdana");

    function clipTextToGrid(leftAxisBorder,theText,font){
        ctx.save();
        ctx.beginPath();
        ctx.rect(leftAxisBorder,0,canvas.width-leftAxisBorder,canvas.height);
        ctx.clip();
        ctx.font=font;
        ctx.fillText(theText,3,50);
        ctx.restore();
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
1
你可以将文本绘制到一个离屏画布上（即在内存中的新画布），然后将该画布绘制到主画布上，应用剪辑。这将允许你绘制离屏画布的任何部分，例如 "裁剪" 它以获得你想要的效果。这可以使用常规的 drawImage 方法完成：
 ctx.drawImage([x: adjust for clipping], y, w, h, sourceCanvas, 0, 0, w, h);

当然，您需要计算要剪切多少。

希望这样说得清楚明白！

0

一些注意事项：

1）如果您想要剪切文本的结尾，您可以使用fillText()的可选maxWidth参数。

2）其他使用globalCompositeOperation进行剪切的方法在这里表示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接