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

 

by:授客 QQ1033553122

直接上代码

 

// 获取单行文本的像素宽度

getTextPixelWith(text, fontStyle) {

var canvas = document.createElement("canvas"); // 创建 canvas 画布

var context = canvas.getContext("2d"); // 获取 canvas 绘图上下文环境

context.font = fontStyle; // 设置字体样式,使用前设置好对应的 font 样式才能准确获取文字的像素长度

var dimension = context.measureText(text); // 测量文字

return dimension.width;

}

 
使用

let centerTextPixelWidth = this.getTextPixelWith(

'想要获取像素宽度的文本',

'13px "Microsoft YaHei"'

);

 

JavaScript 基于HTML5 canvas 获取文本占用的像素宽度的更多相关文章

  1. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  2. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  3. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  4. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

  5. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  6. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  7. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  8. 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...

  9. 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机weba ...

随机推荐

  1. Netty Pipeline与ChannelHandler那些事

    Pipeline和ChannelHandler是Netty处理流程的重要组成部分,ChannelHandler对应一个个业务处理器,Pipeline则是负责将各个ChannelHandler串起来的& ...

  2. fastjson 1.2.24-基于JdbcRowSetImpl的PoC构造与分析

    前言: 基于fastjson的第一种payload是基于templatesImpl的方式,但是这种方式要求Feature.SupportNonPublicField才能打开非公有属性的反序列化处理,是 ...

  3. 【高可用架构】借助Envoy工具发布项目到多台服务器

    前言 在上一篇,我们已经成功在开发机上部署了Deploy项目,下面我们继续在开发机上安装Envoy 两台应用服务器的IP 192.168.10.12 192.168.10.18 [高可用架构]系列链接 ...

  4. CoreDNS安装及集群验证

    目录 叙述 安装 测试 一 测试 二 CoreDNS 叙述 截止到目前为止,整个集群的核心组件已经安装完成. 此时集群内部还需要 CoreDNS 组件的支持. 安装 CoreDNS 是以 Pod 的形 ...

  5. 02-kubeadm初始化Kubernetes集群

    目录 部署 组件分布 部署环境 kubeadm 步骤 基础环境 基础配置 安装基础组件 配置yum源 安装组件 初始化 master 导入镜像 执行命令: 查看组件状态 查看node状态 安装flan ...

  6. Xtrabackup 介绍

    目录 概念 备份方式 xtrabackup 特点 通信方式 备份过程 扩展理解 xtrabackup 如何实现增量备份 概念 Xtrabackup是由Percona开发的一个开源软件,可实现对Inno ...

  7. DJango中事务的使用

    Django 中事务的使用 Django默认的事务行为 默认情况下,在Django中事务是自动提交的.当我们运行Django内置的模板修改函数时,例如调用model.save()或model.dele ...

  8. Spring Cloud第三篇 | 搭建高可用Eureka注册中心

    ​ ​本文是Spring Cloud专栏的第三篇文章,了解前两篇文章内容有助于更好的理解后面文章: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...

  9. 解决mysql java.sql.SQLException: The server time zone value‘XXXXXX' is unrecognized or represents...

    解决 java.sql.SQLException: The server time zone value 'XXXXXX' is unrecognized or represents more tha ...

  10. 【LiteOS】STM32F103-LiteOS移植教程(详细篇)【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...