javascript - 如何将画布添加为多行字符串中特定文本的粗体？

Question

可能吗？html:

   <canvas>  </canvas>

js：

  var ctx = canvas.getContext('2d');
     ctx.font = "10pt  bold Courier";
       var input ="99%" + "More teams partcipated in the contest of asia tournament"
       ctx.fillText(input, 100, 100);

O/p: 99 是来自服务的动态数据。99% - 应该是粗体并突出显示

更多队伍参加了亚洲锦标赛的比赛//普通文本

Answer 1

尝试执行以下操作：

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);

<canvas id="my-canvas" width="250" height="150"></canvas>