JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
基于HTML5 canvas 获取文本占用的像素宽度
by:授客 QQ:1033553122
直接上代码
// 获取单行文本的像素宽度
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 获取文本占用的像素宽度的更多相关文章
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 基于HTML5 Canvas和jQuery 的绘图工具的实现
简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...
- 18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- 基于HTML5 Canvas的线性区域图表教程
之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- 基于HTML5 Canvas实现用户交互
很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...
- 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸
/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机weba ...
随机推荐
- Netty Pipeline与ChannelHandler那些事
Pipeline和ChannelHandler是Netty处理流程的重要组成部分,ChannelHandler对应一个个业务处理器,Pipeline则是负责将各个ChannelHandler串起来的& ...
- fastjson 1.2.24-基于JdbcRowSetImpl的PoC构造与分析
前言: 基于fastjson的第一种payload是基于templatesImpl的方式,但是这种方式要求Feature.SupportNonPublicField才能打开非公有属性的反序列化处理,是 ...
- 【高可用架构】借助Envoy工具发布项目到多台服务器
前言 在上一篇,我们已经成功在开发机上部署了Deploy项目,下面我们继续在开发机上安装Envoy 两台应用服务器的IP 192.168.10.12 192.168.10.18 [高可用架构]系列链接 ...
- CoreDNS安装及集群验证
目录 叙述 安装 测试 一 测试 二 CoreDNS 叙述 截止到目前为止,整个集群的核心组件已经安装完成. 此时集群内部还需要 CoreDNS 组件的支持. 安装 CoreDNS 是以 Pod 的形 ...
- 02-kubeadm初始化Kubernetes集群
目录 部署 组件分布 部署环境 kubeadm 步骤 基础环境 基础配置 安装基础组件 配置yum源 安装组件 初始化 master 导入镜像 执行命令: 查看组件状态 查看node状态 安装flan ...
- Xtrabackup 介绍
目录 概念 备份方式 xtrabackup 特点 通信方式 备份过程 扩展理解 xtrabackup 如何实现增量备份 概念 Xtrabackup是由Percona开发的一个开源软件,可实现对Inno ...
- DJango中事务的使用
Django 中事务的使用 Django默认的事务行为 默认情况下,在Django中事务是自动提交的.当我们运行Django内置的模板修改函数时,例如调用model.save()或model.dele ...
- Spring Cloud第三篇 | 搭建高可用Eureka注册中心
本文是Spring Cloud专栏的第三篇文章,了解前两篇文章内容有助于更好的理解后面文章: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...
- 解决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 ...
- 【LiteOS】STM32F103-LiteOS移植教程(详细篇)【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...