JSを使用してキャンバスに文字の一部を描画する方法は？

Question

は、私はこのようなfillText()を使用してキャンバス上の文字の一部だけを印刷したい：

私は部品サイズを変数に基づくようにする（この場合のn〜0.6）。

文字の近くにある矩形を消去して、その部分が消去されないようにしたいと思います。既にクリアしたくない部分が下に描画されることがあります。

それを実現する方法はありますか？

Answer 1

複数の方法があります。

オプション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>

オプション2：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とそれを組み合わせることが可能と知っている。）

オプション3：バッファキャンバスを+ 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>

より多くのオプションはすべて、もちろんあります。そのうちの1つは実際のニーズに応じて異なりますが、これらは主なものであり、ほとんどのケースをカバーする必要があります。

可変サイズを取得するには、ctx.measureText(yourString).widthを使用して、各オプションに必要な変数を設定します。