<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 文字的度量

     * measureText(字符串)

     * 注意在使用前设置好对应的 font 属性才能准确获取文字的长度

     */

    cxt.fillStyle = "blue";

    cxt.font = "bold 40px sans-serif";

    var textWidth = cxt.measureText("Hello Canvas");

    alert(textWidth.width);

</script>

HTML5 Canvas ( 文字的度量 ) measureText的更多相关文章

  1. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  2. HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

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

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  7. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  8. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  9. HTML5 Canvas 为网页添加文字水印

    <!DOCTYPE html> <html> <body> <canvas id=" style="border:1px solid #d ...

随机推荐

  1. （4）logging（日志模块）

    日志分成几个常用的级别 debug 10 代表程序调试过程中的信息 info 20 代表普通日志信息,用户的访问等等 warning 30 警告日志,有可能出错,但是目前还没出错的 error 40 ...

  2. CTF之当铺密码

    当铺密码即:汉字的笔画有几笔出头,则代表数字几 例如:由=1 王=6 大=5

  3. sql server 表变量存储临时查询数据

    对于使用sql server 编写存储过程或者类似的sql 查询的时候我们使用表变量进行临时数据的存储,可以方便我们进行下来的数据处理 表变量的使用类似如下: declare @userinfo ta ...

  4. 将svnserve部署为后台服务

    由于svnserve运行模式没有部署为后台服务,很容易被人误关掉.于是在网上查了一下,发现也已经有人总结了.Copy过来,以作备忘. 以前的svnserve要想成为windows服务,必须依赖于svn ...

  5. 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ

    在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...

  6. 【转】每天一个linux命令（58）：telnet命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/13/2956992.html telnet命令通常用来远程登录.telnet程序是基于TELNET ...

  7. 【转】每天一个linux命令（49）：at命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/01/05/2846152.html 在windows系统中,windows提供了计划任务这一功能,在控制 ...

  8. Linux elasticsearch 安装 遇到的问题

    备注:我的 Linux 测试机  是2G 内存的 ,估计内存小于 我的内存肯定会出这个问题 .(安装的最新版6.3.2) 1.  下载文件  解压 2 .试着 运行 bin 下面的 elasticse ...

  9. 49个你应该了解的Android Studio技巧、插件与资源 http://www.apkbus.com/blog-822721-72630.html (出处: 安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户)

    49个你应该了解的Android Studio技巧.插件与资源http://www.apkbus.com/blog-822721-72630.html(出处: 安卓巴士 - 安卓开发 - Androi ...

  10. 最新hadoop虚拟机安装教程（附带图文）

    前两天看到有人留言问在什么情况下需要部署hadoop,我给的回答也很简单,就是在需要处理海量数据的时候才需要考虑部署hadoop.关于这个问题在很早之前的一篇分享文档也有说到这个问题,数据量少的完全发 ...