<!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. LG1600 天天爱跑步

    题意 分析 对一个(s,t)查询,令f=lca(s,t),则操作可化为(s,f),(f,t). 考虑观察到的情况,若x在s到t的路径上,且x观察到,则 \[ \textrm{dep}_s-\textr ...

  2. 【转】python基础-编码与解码

    [转自:https://www.cnblogs.com/OldJack/p/6658779.html] 一.什么是编码 编码是指信息从一种形式或格式转换为另一种形式或格式的过程. 在计算机中,编码,简 ...

  3. 基于server broker 的数据实时更新

    Service Broker介绍:SQL Server Service Broker 为消息和队列应用程序提供 SQL Server 数据库引擎本机支持.这使开发人员可以轻松地创建使用数据库引擎组件在 ...

  4. XDomainRequest object

    The XDomainRequest object has these types of members: Events Methods Properties Events The XDomainRe ...

  5. JZ2440 裸机驱动 第9章 中断体系结构

    本章目标:     了解ARM体系CPU的7种工作模式     了解S3C2410/S3C2440中断体系结构     掌握S3C2410/S3C2440的中断服务程序的编写方法 9.1 S3C241 ...

  6. 【android】android 常用adb 和 adb shell 命令

    db是SDK自带的工具,可实现桥接功能:adb shell 可以与手机系统建立交互,是基于andoid Linux系统下的操作 ADB常用命令: 1. 查看设备         adb  device ...

  7. java学习之路之javaSE基础3

    所有代码都未经测试.. 1:for循环的格式? for循环格式: for(初始化表达式;条件表达式;循环后的操作表达式) { 循环体; } 执行流程: * a:执行初始化语句 * b:执行判断条件语句 ...

  8. 如何在UltraEdit中高亮显示PB代码

    打开UE,从菜单中选择高级->配置… 点击打开按钮,注意文件WordFile.txt最后一个高亮显示语言的编号,格式为“ /L(number) ”,假设最后一个高亮显示语言的编号是15,修改UE ...

  9. a标签不用点击模拟跳转url。

    因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...

  10. js例子记载

    1.获取项目路径的,不一定有用,仅作参考用: function getRootPath() { var curWwwPath = window.document.location.href; //&q ...