<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制文本</h3>

  <canvas id="c11" width="500" height="400"></canvas>

  <script>

    var ctx = c11.getContext('2d');

    var txt = 'abgyj中国123';

    ctx.font = '30px SimHei';

    ctx.textBaseline = 'top';

    //ctx.fillText(txt, 0, 0);

    ctx.strokeText(txt, 0, 0);

    console.log( ctx.measureText(txt) )

  </script>

</body>

</html>

结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制文本</h3>

  <canvas id="c11" width="500" height="400"></canvas>

  <script>

    var ctx = c11.getContext('2d');

    var txt = 'dsfadf你好';

    ctx.font = '30px SimHei';

    ctx.textBaseline = 'top';

    //左上角

    ctx.strokeText(txt, 0, 0);

    //右上角

    var w = ctx.measureText(txt).width;

    ctx.strokeText(txt, 500-w, 0);

    //左下角

    ctx.fillText(txt, 0, 400-30);

    //右下角

    ctx.fillText(txt, 500-w, 400-30);

  </script>

</body>

</html>

结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制文本</h3>

  <canvas id="c11" width="500" height="400"></canvas>

  <script>

    var ctx = c11.getContext('2d');

    var txt = '明天会更好！';

    ctx.font = '60px SimHei';

    ctx.textBaseline = 'top';

    ctx.strokeStyle = '#f00';

    var w = ctx.measureText(txt).width;

    var x = -w;

    var y = 0;

    setInterval(function(){

      //清除已有内容

      ctx.clearRect(0,0, 500, 400);

      //重新绘制文本

      ctx.strokeText(txt, x, y);

      x += 10;

      if(x>=500){   //文本已到最右侧

        x = -w;

      }

    }, 50)

  </script>

</body>

</html>

canvas 绘制文本的更多相关文章

  1. canvas绘制文本

    canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...

  2. canvas绘制文本自动换行

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. HTML5 canvas绘制文本

    demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...

  4. FontMetrics ----- 绘制文本，获取文本高度

    Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...

  5. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  6. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  7. canvas绘制文字

    绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...

  8. html5 canvas绘制圆形印章，以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. day4-递归

    递归 特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1) 递归就是在 ...

  2. Atom常用快捷键及设置

    常用快捷键: cmd-z 修改历史中后退 cmd-y 修改历史中前进 ctl-shift-c 复制该聚焦文件的路径 cmd-/ 注释 shift-cmd-d 复制整行并粘贴到下一行 ctl-shift ...

  3. DNS域名解析的配置

    /etc/resolv.conf它是DNS客户机配置文件,用于设置DNS服务器的IP地址及DNS域名,还包含了主机的域名搜索顺序.该文件是由域名解析 器(resolver,一个根据主机名解析IP地址的 ...

  4. Thrift简单调用

    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  5. HTML5/CSS3实现图片倒影效果

    在线演示 本地下载

  6. centos、linux查找未挂载磁盘格式化并挂载？

    centos.linux查找未挂载磁盘格式化并挂载? df -h 查看当前linux服务器硬盘: fdisk -l /dev/sda   第一块硬盘 /dev/sdb   第二块硬盘 依此类推 以/d ...

  7. fabric安装使用

    可以使用pip安装fabric,注意使用pip 安装fabric时,一定要指定版本,不要安装2.0版本的,无论怎样都会提示没有api这样模块,所以指定安装 pip install fabric==1. ...

  8. SQL查询以某个字母开头

    select * from a where left(a.name, 1)='H'; 或 select * from a where a.name REGEXP ''^(B|S)'';

  9. 蓝屏代码大全 & 蓝屏全攻略

    转载自http://diybbs.zol.com.cn/15/86_141447.html 一.蓝屏含义 1.故障检查信息 ***STOP 0x0000001E(0xC0000005,0xFDE38A ...

  10. “玲珑杯”ACM比赛 Round #13 B -- 我也不是B（二分排序）

    题意:开始有一个空序列s,一个变量c=0,接着从左往右依次将数组a中的数字放入s的尾部,每放一个数字就检测一次混乱度K,当混乱度k大于M时就清空序列并让c=c+1 K = Bi * Vi(1<= ...