<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <canvas id="drawing" width="200" height="200" style="background:gray;">A drawing of something</canvas>

    <script>

        var drawing = document.getElementById('drawing')

        if (drawing.getContext) {

            var context = drawing.getContext('2d')

            context.font = 'bold 14px arial'

            context.textAlign = 'center'

            context.textBaseline = 'middle'

            context.fillText('12', 100, 20)

            // 如果将 textAlign 设置为"start",则 x 坐标表示的是文本左端的位置

            context.textAlign = 'start'

            context.fillStyle = 'rgba(0,0,255,0.5)'

            context.fillText('12', 100, 40)

            // 则 x 坐标表示的是文本右端的位置

            context.textAlign = 'end'

            context.fillStyle = 'rgba(255,0,0,0.5)'

            context.fillText('12', 100, 60)

            context.textAlign = 'start'

            var fontSize = 100

            context.font = fontSize + 'px arial'

            // 返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性,但将来还会增加更多度量属性

            while (context.measureText('Hello world!').width > 140) {

                fontSize--

                context.font = fontSize + 'px arial'

            }

            context.fillText('Hello world!', 10, 10)

        }

    </script>

</body>

</html>

-_-#【Canvas】绘制文本的更多相关文章

  1. canvas绘制文本

    canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...

  2. canvas 绘制文本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. canvas绘制文本自动换行

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  5. FontMetrics ----- 绘制文本，获取文本高度

    Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...

  6. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  7. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. canvas绘制文字

    绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...

  10. html5 canvas绘制圆形印章，以及与页面交互

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

随机推荐

  1. android string.xml里的空格字符

    在string.xml定义字符串的时候常常要用到空格, 直接用键盘敲的话不知道是几个空格,常常看错了,导致误删. 假设用 来替代空格的话,就好非常多. 另外使用%1$s,%1$d能够在一个字符串里定义 ...

  2. Block小结

    Blocks是C语言的扩充功能.用一句话来表示Blocks的扩充功能:带有自动变量(局部变量)的匿名函数. block其实是一个代码块,但是它的神奇之处在于在内联(inline)执行的时候(这和C++ ...

  3. Android运行时注解

    Android的注解有编译时注解和运行时注解,本文就介绍下运行时注解. 其实非常简单,直接上代码:本文主要是替代传统的findViewById()的功能,就是在我们Activity中不需要再使用fin ...

  4. Linux磁盘管理：LVM逻辑卷的拉伸及缩减

    ①查看当前VG的信息,保证VG中有足够的空闲空间 通过 vgdisplay 或者 vgs 命令 [root@rusky ~]# vgs rusky-vg VG #PV #LV #SN Attr VSi ...

  5. grunt插件[font-spider] : 转码,压缩字体 @font-face

    字蛛插件:压缩与转码静态页面中的 WebFont 需要注意的是,目前只支持 grunt@0.4.1 package.json { "name": "fontS" ...

  6. （转）ecshop 后台商品分类添加图片的功能

    转之--http://blog.sina.com.cn/s/blog_4696b3760100n5ee.html   1 .首先找到数据表 ecs_category (商品分类表) 添加一 cat_i ...

  7. 关于IO学习的几个函数

    这是最近学到的几个关于IO文件操作的几个小算法,今天总结出来. 1. 删除一个给定的目录,这上目录不为空目录,使用递归来实现 public void test04(File file) { File[ ...

  8. iOS 不同类之间的传值

    iOS是面向对象开发的,有很多不同的类,很多时候会遇到类与类之间的"交流"需求,比如通知.传递数值等等,(通知可以用nsnotificationcenter来做, 以后总结)下面主 ...

  9. UIScrollView不能响应touch事件的解决办法

    UIScrollView本身事是不支持touch的,我们可以给她添加拓展 #import "UIScrollView+util.h" @implementation UIScrol ...

  10. 【cogs247】售票系统

    [问题描述] 某次列车途经C个城市,城市编号依次为1到C,列车上共有S个座位,铁路局规定售出的车票只能是坐票, 即车上所有的旅客都有座.售票系统是由计算机执行的,每一个售票申请包含三个参数,分别用O. ...