专栏首页授客的专栏JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

基于HTML5 canvas 获取文本占用的像素宽度

直接上代码

// 获取单行文本的像素宽度
getTextPixelWith(text, fontStyle) {
var canvas = document.createElement("canvas"); // 创建 canvas 画布
var context = canvas.getContext("2d"); // 获取 canvas 绘图上下文环境
context.font = fontStyle; // 设置字体样式,使用前设置好对应的 font 样式才能准确获取文字的像素长度
var dimension = context.measureText(text); // 测量文字
returndimension.width;
        }

let centerTextPixelWidth = this.getTextPixelWith(
    '想要获取像素宽度的文本',
    '13px "Microsoft YaHei"'
);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 结合html2canvas和jsPDF实现html页面转pdf

    E:\MyProjects\TMP\frontend>npm install html2canvas

    授客
  • Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    import NotFound from "@/views/Error/404";

    授客
  • JMeter 逻辑控制之While循环控制器(While Controller)

    While Controller会一直运行,直到条件(Condition)为false

    授客
  • HTML页面导出PDF——高清版

      需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰。

    _一级菜鸟
  • js下载图片

    Wyc
  • JavaScript闭包

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Phonegap项目中禁用WebViewBounce

    UIWebView是iOS SDK中一个最常用的控件,在PhoneGap中,默认也是使用UIWebView作为默认视图显示我们的HTML应用的。

    大江小浪
  • JavaScript设计模式--装饰者模式

    有时我们不希望某个类天生就非常庞大,一次性包含许多职责。那么我们就可以使用装饰着模式。 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中...

    奋飛
  • C# dotnet core 局域网组播方法

    我在微软官网找到了用 C# 做 UDP 组播的方法,我优化一些逻辑,保留核心代码,然后加了一点封装

    林德熙
  • PHP教程系列5 - 最重要的助手Composer

    Composer是PHP的依赖管理工具,诞生的时间比较晚,在PHP5.3才正式发布。发布之后不温不火,支持的包也少,一度被认为是下一个pecl(比较失败的工具)...

    sibenx

扫码关注云+社区

领取腾讯云代金券