7

我有一个在 HTML5 画布上绘制的文本。如何剪辑或隐藏一行左侧的部分文本？

在此示例中，单词“HELLO”的部分被剪裁到红线的左侧。

有两个限制：

  1. 一切都将绘制在同一张画布上。没有要创建的新画布
  2. 我实际工作中的红线是图表的 y 轴。红线的左侧是轴的标签。所以想象一下在那一边画了一些东西，他们需要展示。该部分不能被阻止或擦除。

在此处输入图像描述

4

3 回答 3

7

Jarrod 有用技术的替代方法是在绘制文本时使用剪切区域。

例如，如果您的 y 轴为 30px，则此剪辑不会在 30px 的左侧绘制文本

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>
于 2013-05-09T21:56:30.090 回答
1

您可以将文本绘制到屏幕外画布（这是内存中的新画布），然后将该画布绘制到主画布，应用您的剪辑。

这将允许您绘制屏幕外画布的任何部分，例如“剪裁”它以获得您想要的效果。这可以通过常规drawImage方法完成：

 ctx.drawImage([x: adjust for clipping], y, w, h, sourceCanvas, 0, 0, w, h);

您当然必须计算要剪辑多少。

希望这是有道理的！

于 2013-05-08T00:49:56.170 回答
0

一些注意事项：

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

2)这里globalCompositeOperation表示使用的其他裁剪方法。

于 2014-02-10T16:33:17.213 回答