文本宽度的测量--measureText

HTML5中的canvas提供了文字宽度的测量方法:

ctx.measureText(string).width
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

注: IE8以下的浏览器不支持该方法

时间: 2024-08-06 16:35:29

文本宽度的测量--measureText的相关文章

jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了.为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.需要注

[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 strokeText用法: cxt.strokeText( text, x,  y, [maxwidth] ) text:需要输出的文本内

vim设置文本宽度

'textwidth' 'tw'        number  (default 0)                        local to buffer                        {not in Vi}        Maximum width of text that is being inserted.  A longer line will be        broken after white space to get this width.  A ze

iOS UILabel根据文本宽度改变字体大小

之前一直不知道有这样一个属性,看了这篇博文才知道 http://my.oschina.net/joanfen/blog/145184 myLabel.adjustsFontSizeToFitWidth = YES; //假设文字内容为@"曾在月光之下望烟花,曾共看夕阳渐降下",Label长度为200,则一行显示不下,若设置此属性为YES,则会降低字体大小,以显示全部内容.

自定义view实现阻尼效果的加载动画

效果: > 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简

今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。

Canvas 标签<canvas></canvas> 默认宽300,高150,不用用Css设置宽高 获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象,利用该方法绘图 基本绘图命令 设置开始绘图位置:ctx.moveTo(x,y); 设置直线到的位置:ctx.lineTo(x,y); 描边绘制:ctx.stroke(); 填充绘制:ctx.fill(); 自动闭合路径:ctx

android开发FontMetrics的理解

Paint.FontMetrics.top:基准位置上方 最大高度 Paint.FontMetrics.ascent:基准位置上方 推荐高度 Paint.FontMetrics.baseline 基准位置,为0 Paint.FontMetrics.descent 基准位置下方 推荐高度 Paint.FontMetrics.bottom 基准位置下方 最大高度 Paint.FontMetrics.leading 行间距大小 理解如图所示: 获取文本高度方法: 文本宽度:paint.measureT

Android文本的测量和绘制

翻译与Chris Banes的博客   原文地址 如果你想手动在Android Canvas上画些什么东西,你最好从绘制文本开始. 文本绘制之前,你需要知道测量文本的绘制位置,计算文本X/Y轴的位置.                                                                                         最近我在一款APP中,需要在横向和纵向的画布上绘制一些以文本为中心的文字.于是我用了下面这些代码: Paint mText

关于 Android 测量文字宽度的方法

2020-02-04 关键字:测量文本长度.测量字符串长度 最近在写 APK 时遇到了需要获取文本宽度的需求.其实就是要自己写一个算法以实现文本超长自动换行的功能. 在实现这一功能时发现了原来在 Android 中测量文本的长度,或者说宽度可以分两种情况: 1.测量绝对文本的长度 2.测量相对文本的长度 首先必须声明这两个概念是笔者自己定义的,因为我实在找不着更贴切的词句去形容它们了. 什么是绝对文本呢? 就是指那些字号.字体.粗细等属性不受在所运行的硬件设备上的 Android 系统的配置所影