<!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. 【Deep Learning学习笔记】Dynamic Auto-Encoders for Semantic Indexing_Mirowski_NIPS2010

    发表于NIPS2010 workshop on deep learning的一篇文章,看得半懂. 主要内容: 是针对文本表示的一种方法.文本表示可以进一步应用在文本分类和信息检索上面.通常,一篇文章表 ...

  2. 在 Java 中高效使用锁的技巧--转载

    竞争锁是造成多线程应用程序性能瓶颈的主要原因 区分竞争锁和非竞争锁对性能的影响非常重要.如果一个锁自始至终只被一个线程使用,那么 JVM 有能力优化它带来的绝大部分损耗.如果一个锁被多个线程使用过,但 ...

  3. 在一个UIView中如何使用多个UIPickerView

    可以现在storyboard的UIView中拖入多个UIPickerView 然后同样是继承相关的UIPickerView协议 <UIPickerViewDataSource,UIPickerV ...

  4. Java基础知识强化18：抽象类、接口的区别 和 选择性实现接口方法

    1.抽象类和接口的区别 抽象类里面可以有非抽象的方法(可以没有抽象方法),接口里只能有抽象方法. 抽象类中的抽象方法声明时不能有大括号,而接口中的所有方法都没有大括号.  抽象类(abstract c ...

  5. spring 读取properties的两种方法

    一:直接使用context命名空间 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi= ...

  6. codevs 2541 幂运算（迭代加深搜索）

    /* 一开始想到了简单的深搜 维护当前可用的mi数组 然后回溯用哪个 不断更新新产生的mi 这样的问题是 由于mi不断产生 搜索规模扩大 不好 不好 下面是奇丑的WA掉的代码 做个反面教材 */ #i ...

  7. Cookie的读写

    记住怎么写就可以了,不要问我为什么=_= 设置值的页面:context.Response.SetCookie(new HttpCookie("username",username) ...

  8. css渐变色

    <!DOCTYPE html><html><head> <meta http-equiv="content-type" content=& ...

  9. C#word（2007）操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化

    转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...

  10. 谈谈PHP、Python与Ruby

    假如你想帮他尽快找个活儿,赚到钱,推荐PHP. 假如你想让他成为一个高效工程师,推荐 Python. 假如你想让他爱上他的工作,推荐 Ruby. 语言的选择 编程语言非常重要,不要认为他们都图灵等价, ...