目录
js计算任意字符串宽度
由于像素和字体大小,字节(特别是 UTF-8)等限制因素,所以我们不能直接知道一个字符串所占的实际宽度。
1. 法一 使用canvas画布。
测量文本以计算并返回给定字体的给定文本的宽度(以像素为单位)。
/**
* 使用canvas画布。测量文本以计算并返回给定字体的给定文本的宽度(以像素为单位)。
* Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
* 要呈现的文本
* @param {String} text The text to be rendered.
* 用于呈现文本的css字体描述符
* @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
*
* @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
*/
function getTextWidth(text, font) {
// 重用canvas对象以获得更好的性能
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
// console.log('context=', context) 获得对绘图上下文canvas的引用
context.font = font
var metrics = context.measureText(text)
console.log('metrics=', metrics)
return metrics.width;
}
console.log(getTextWidth("hello there!", "bold 12pt arial")); // close to 86
getContext("2d")
方法
要在画布上绘制图形,首先要取得绘图上下文。使用 getContext()
方法可以获取对绘图上下文的引用。对于平面图形,需要给这个方法传入参数"2d",表示要获取 2D 上下文对象:
let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas>
if (drawing.getContext) {
let context = drawing.getContext("2d");
// 其他代码
}