画布绘制文字宽度

Question

ctx.font="73px 方正兰亭特黑简体";
var gradient=ctx.createLinearGradient(0,0,403,0);
gradient.addColorStop("0","#ffa91a");
gradient.addColorStop("0.5","#ffe846");
gradient.addColorStop("1.0","#ffef8c");
ctx.fillStyle=gradient;
;
ctx.fillText("fwefwefewf",495,230);

如何捕获文本的问题，因为文本的宽度是动态的403我要改变文本的宽度

Answer 1

您可以尝试使用measureText()上下文方法：

ctx.font="73px 方正兰亭特黑简体";

var txt = 'fwefwefewf';
var txtWidth = ctx.measureText(txt).width;   /// width in pixels

var gradient=ctx.createLinearGradient(0,0, txtWidth, 0);
gradient.addColorStop(0,  "#ffa91a");
gradient.addColorStop(0.5,"#ffe846");
gradient.addColorStop(1.0,"#ffef8c");
ctx.fillStyle=gradient;

ctx.fillText(txt, 495,230);

请记住同时考虑文本位置以及渐变。