<!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. 【安卓】给ViewFlipper加指示器,相似ViewPagerIndicator库提供的那种、！

    思路: 1.viewPager有setOnPageChangeListener能够监听切换动作,但viewFlipper却死活没类似的东西.! 此处有一个变种思路,基于animation,animat ...

  2. web系统架构的演进变化很形象

    随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只需一个应用, ...

  3. 《火球——UML大战需求分析》(第1章 大话UML)——1.2 结构型的UML（Structure Diagram）

    说明: <火球——UML大战需求分析>是我撰写的一本关于需求分析及UML方面的书,我将会在CSDN上为大家分享前面几章的内容,总字数在几万以上,图片有数十张.欢迎你按文章的序号顺序阅读,谢 ...

  4. 第二篇：R语言数据可视化之数据塑形技术

    前言 绘制统计图形时,半数以上的时间会花在调用绘图命令之前的数据塑型操作上.因为在把数据送进绘图函数前,还得将数据框转换为适当格式才行. 本文将给出使用R语言进行数据塑型的一些基本的技巧,更多技术细节 ...

  5. Android Studio 使用GitHub

    Android Studio 使用GitHub 1.安装配置 默认大家都已经安装了git软件,参考下图进行git与as关联 配置git  设置GitHub用户信息  填写完用户名,密码后可以点击Tes ...

  6. 关于JS中查看当前节点的兄弟节点的使用

    <tr> <td align="center"><input style="width: 20px;" type="ch ...

  7. NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别

    NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别 1. Interop含义Interop是互操作的含义.Microsoft.Off ...

  8. 【USACO 1.2.3】命名那个数字

    [问题描述] 在威斯康辛州牛大农场经营者之中,都习惯于请会计部门用连续数字给母牛打上烙印.但是,母牛用手机时并没感到这个系统的便利,它们更喜欢用它们喜欢的名字来呼叫它们的同伴,而不是用像这个的语句&q ...

  9. 服务器之间socket传输单链接和多连接测试结果

    今天做了一下测试,目的是看看局域网内服务器a,通过一个连接往服务器b传输数据,和通过多个连接传输的不同. 结果发现和多少个连接没关系,一个进程一个连接就能跑满网卡,只要write的时候够快,read的 ...

  10. 清除div浮动的三种方式

    html: <body> <div class="main"> <div class="first"></div> ...