js计算文本在页面所占px宽度

计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth（web端适用）

/*** 获取文本px宽度* @param font{String}: 字体样式**/
String.prototype.pxWidth = function(font) {
  var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
      context = canvas.getContext("2d"); 

  font && (context.font = font);
  var metrics = context.measureText(this);

  return metrics.width;
}

 

计算文本在页面所占px宽度 -- 扩展String原型方法pxWidth（小程序端适用）

componentDidMount(){
    /*** 获取文本px宽度* @param font{String}: 字体样式**/
    String.prototype.pxWidth = function(font) {
      let metrics = {}
      try {
        let context = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = Taro.createCanvasContext('description'))
        font && (context.font = font);
        metrics = context.measureText(this);
      } catch (e) {}
      return metrics.width || 0;
    }
  }

render() {
    return (
      <View>
        <Canvas canvasId='description' type='2d' style={{position: 'fixed', top: '-100rpx', left: '0rpx', width: '750rpx', height: '100rpx'}}></Canvas>
      </View>
    )
  }