<!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. java 类型转换：

    数值数据类型: 1.自动类型转换 byte->short ->int->long-->float--->double 范转小的类型向范围大的类型号转换,由系统自动完成   ...

  2. ThinkPHP 3.2版本 , 无法读取$_SESSION['verify_code']

    官方网站上写的是: 生成的验证码信息会保存到session中,包含的数据有: array('verify_code'=>'当前验证码的值','verify_time'=>'验证码生成的时间 ...

  3. iOS开发系列之触摸事件

    基础知识 三类事件中触摸事件在iOS中是最常用的事件,这里我们首先介绍触摸事件. 在下面的例子中定义一个KCImage,它继承于UIView,在KCImage中指定一个图片作为背景.定义一个视图控制器 ...

  4. 判断在Android手机内， 页面重新刷新一次

    <script type="text/javascript"> var UA = navigator.userAgent.toLowerCase(); //androi ...

  5. ASPNET5的依赖注入

    ASP.NET5设计的时候就是以DI为基础的,它可以利用内建的框架在Startup类的方法中,把依赖注入进去.应用服务也可以被配置的注入.默认的服务容器提供一些基本的功能,它并不打算代替现代主流的DI ...

  6. Android开发手记(21) 遍历文件夹

    我们在遍历文件夹的时候由于涉及到SD卡相关操作,所以我们需要添加如下权限: <uses-permission android:name="android.permission.WRIT ...

  7. 【转】 iOS使用AVFoundation实现二维码扫描

    原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...

  8. oracle查询表信息（索引，外键，列等）

    oracle中查询表的信息,包括表名,字段名,字段类型,主键,外键唯一性约束信息,索引信息查询SQL如下,希望对大家有所帮助:1.查询出所有的用户表 select * from user_tables ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第三章：搜索、高级过滤和视图模型

    在这一章中,我们首先添加一个搜索产品的模块以增强站点的功能,然后使用视图模型而不是ViewBag向视图传递复杂数据. 注意:如果你想按照本章的代码编写示例,你必须完成第二章或者直接从www.apres ...

  10. 在SpringMVC框架下建立Web项目时web.xml到底该写些什么呢？

    刚刚初学Spring MVC,却连一个简单的helloworld都搞的懵懵懂懂的,配置文件搞不清,各种文件之间的逻辑关系也不懂,连续看了好些日子的Spring MVC了,今天终于下定决心,每天记录一点 ...