<!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. PHP安全编程：跨站请求伪造CSRF的防御(转)

    跨站请求伪造(CSRF)是一种允许攻击者通过受害者发送任意HTTP请求的一类攻击方法.此处所指的受害者是一个不知情的同谋,所有的伪造请求都由他发起,而不是攻击者.这样,很你就很难确定哪些请求是属于跨站 ...

  2. iOS平台基于ffmpeg的视频直播技术揭秘

    现在非常流行直播,相信很多人都跟我一样十分好奇这个技术是如何实现的,正好最近在做一个ffmpeg的项目,发现这个工具很容易就可以做直播,下面来给大家分享下技术要点: 首先你得编译出ffmpeg运行所需 ...

  3. CoreText实现图文混排之点击事件

    今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...

  4. TCP/IP协议原理与应用笔记07：HTTP、TCP/IP与socket区别

    1. TCP/IP协议与HTTP协议区别:      HTTP 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件 ...

  5. POJ 2653 Pick-up sticks (判断线段相交)

    Pick-up sticks Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10330   Accepted: 3833 D ...

  6. 自定义android精美聊天界面

    编写精美聊天界面,那就肯定要有收到的消息和发送的消息. 首先还是编写主界面,修改activity_chat.xml中的代码,如下所示: <?xml version="1.0" ...

  7. RoadTrip 学习笔记

    #RoadTrip 学习笔记 本篇是在Cmd Markdown中写完粘贴来的. RoadTrip介绍 RoadTrip 项目地址:https://github.com/romainguy/road-t ...

  8. c# 使用递归 循环遍历导航树结构 并解析

    1.数据书库结构 1 家用电器 0 一级菜单 2 手机.数码.京东通信 0 一级菜单 3 电脑.办公 0 一级菜单 4 家具.家居.厨房 0 一级菜单 5 男装.女装.童装.内衣 0 一级菜单 6 个 ...

  9. 从Select语句看Oracle查询原理（了解Oracle的查询机制）

    第一步:客户端把语句发给服务器端执行 当我们在客户端执行select语句时,客户端会把这条SQL语句发送给服务器端,让服务器端的进程来处理这语句.也就是说,Oracle客户端是不会做任何的操作,他的主 ...

  10. 小波 mallat 算法

    算法要求:输入序列是大于滤波器长度的偶数列 确实可以通过编程的手段使算法适合所有的情况,但本文章的目的是展示mallat算法的过程,所以就一切从简了 // Mallat.cpp : Defines t ...