<!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. [Angular 2] Validation

    Define a filed should has validation: export class DemoFormSku { myForm: ControlGroup; sku: Abstract ...

  2. android string.xml前后加空格的技巧

    方法1: <string name="password">密    码</string>&#160 这个就代表着空格. 方法2:用\u0020代表空 ...

  3. JVM中java类的加载时机（转载：http://blog.csdn.net/chenleixing/article/details/47099725）

    Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的加载机制.类从被加载到虚拟机内存中开始,到卸载出内 ...

  4. Getting Started with the NDK

    The Native Development Kit (NDK) is a set of tools that allow you to leverage C and C++ code in your ...

  5. Python之路,Day22 - 网站用户访问质量分析监测分析项目开发

    Python之路,Day22 - 网站用户访问质量分析监测分析项目开发   做此项目前请先阅读 http://3060674.blog.51cto.com/3050674/1439129  项目实战之 ...

  6. surfaceView和Camera配合进行摄像头的预览

    首先是Camera类,在5.0上已经被废弃,不推荐使用但还是支持的.最新的是Camera2类,我还没有研究,据说用法完全不一样,反正也是一个坑跳入另外一个坑. 上面是简介和需要的权限,记得加上权限. ...

  7. javabean、DTO、VO

    一.javabean 一. javabean 是什么? Bean的中文含义是“豆子”,顾名思义,JavaBean是指一段特殊的Java类, 就是有默然构造方法,只有get,set的方法的java类的对 ...

  8. 《scraping with python》

    记得刚开始学习python时就觉得爬虫特别神奇,特别叼,但是网上的中文资料大都局限于爬取静态的页面,涉及到JavaScript的以及验证码的就很少了,[当时还并不习惯直接找外文资料]就这样止步于设计其 ...

  9. 开源的Android开发框架-------PowerFramework使用心得（三）内置浏览器BrowserActivity

    使用内置浏览器必须是引用源码的方式(因为jar中不能打包布局文件等资源).内置浏览器是一个继承自BaseActivity的普通Activity,使用WebView实现. 1.简单的打开内置浏览器 In ...

  10. gephi安装好了，为何打不开？

    ref: http://www.zhihu.com/question/21268129?sort=created 这个软件我自己也没有弄过,不过我同学要不会装,所以我测试地帮她装,得益于这个哥们的发的 ...