canvas的measureText()方法

Posted 2020-08-21 Jo

做一个小动画的时候遇到了个问题，就是在给文字应用渐变色的时候，不知怎么设置渐变色的区域。

渐变依赖于定义时的区域，超出这个区域只有纯色，而不是渐变色。 所以要取得文字的宽度。

查了资料得知，canvas有一个measureText()方法，它会返回一个TextMetrics对象，该对象只有一个width属性。

只需要把文本传入measureText()即可：

var texts = ‘texts‘,
metrics = ctx.measureText(texts),
textsWidth = metrics.width,
gradient = ctx.createLinearGradient(10,5,textsWidth,5);
gradient.addColorStop(0,‘#f00‘);
gradient.addColorStop(1,‘#ff0‘);