<!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. 妹子图太多怎么看才好，Swing来支招

    近期事少,翻开非常久曾经写的小程序,创意倒是尚可,代码写的却比較基础,非常多东西没有实现,略改了改形成了如今的模样,如今大家都忙着大数据,中间件,web开发,偶尔看看Java Swing的作品,也许能 ...

  2. Gradle Import Wizard--官方文档

    Last updated and checked to work with version 3.0.0 of the tools This tutorial will take you through ...

  3. 线程、委托、lambda运算符的简单示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. sed 批量替换多个文件里的某个字符/串

    提示: 国际惯例使用前先备份 sed -i "s/a/b/g" `grep 'a' -rl ./`

  5. Python之路,Day4 - Python基础4 (new版)

    Python之路,Day4 - Python基础4 (new版)   本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 ...

  6. 如何做高大上的网站布局 -------------------->>转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

    SEO开始做,最重要的是网站布局,一个网站布局决定了用户在网站的停留时间,在网站中放入用户想要的内容之外,更重要的是要让用户看到网站之后,一目了然,视觉和感官上良好的体验.那新手该如何做网站布局呢? ...

  7. 简单图片banner轮播

    /**************[css]****************/   <style type="text/css">        *{margin:0px; ...

  8. text-overflow:ellipsis的巧妙运用

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  9. jAVA EE里什么是链式调用

    链式调用就是每次调用完了过后返回的是自己,比如Hibernate里面执行hql需要设置参数时,每次设置完参数可以继续使用点设置下一个参数http://blog.sina.com.cn/s/blog_4 ...

  10. 从服务器将Oracle数据库导出到本地Oracle数据库的方法

     1.将服务器上的Oracle数据库导入到本地 在CMD模式下执行以下命令:   exp username1/password@服务器端数据库 file=本地硬盘:/文件名.dmp   例如: exp ...