javascript - 如何使用JS在canvas上绘制人物的一部分？

Question

我想使用 fillText() 在 Canvas 上仅打印字符的一部分，如下所示:

我希望零件尺寸基于变量(在本例中为 n ~ 0.6)。

我不想清除字母附近的矩形，这样它的一部分就会被清除，因为在它下面已经画了一些我不想清除的东西。

有办法实现吗？

Answer 1

有多种方法可以做到这一点。

选项一: clip()

var ctx = c.getContext('2d');
ctx.font = '70px sans serif';
ctx.rect(15, 0, 50, c.height);
ctx.clip();
ctx.fillText('A', 0, 70);

canvas{border:1px solid}

<canvas id="c"></canvas>

选项二: clearRect()(或 fillRect() + 背景颜色)

var ctx = c.getContext('2d');
ctx.font = '70px sans serif';
ctx.fillText('A', 0, 70);
ctx.clearRect(0, 0, 15, c.height);

canvas{border:1px solid}

<canvas id="c"></canvas>

(我知道你明确表示你不想要它，但实际上，你可以将它与 globalCompositeOperations 结合起来，这样你的背景就绘制在字母后面。)

选项三:缓冲 Canvas + drawImage()

var buffer = c.cloneNode()
var bctx = buffer.getContext('2d');
bctx.font = '70px sans serif';
bctx.fillText('A', 0, 70);
var ctx = c.getContext('2d');
ctx.drawImage(buffer, 15, 0, buffer.width, buffer.height, 15, 0, buffer.width, buffer.height);

canvas{border:1px solid}

<canvas id="c"></canvas>

当然还有更多选项，所有这些都取决于您的实际需求，但这些是主要的，应该涵盖大多数情况。

要获取可变大小，您可以使用 ctx.measureText(yourString).width设置每个选项中所需的变量。