<!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. [笔记] Ubuntu下编译ffmpeg+openh264+x264

    [下载代码]   - ffmpeg: git clone git://source.ffmpeg.org/ffmpeg.git - openh264: git clone https://github ...

  2. git使用基础

    一.git介绍 git是由 Linus 开发的一种“分布式版本控制”软件,而在此之前,版本控制基本上都是“集中式版本控制”,如:CVS,SVN 等.两者的区别: 1. "集中式版本控制系统& ...

  3. 一个用于实现并行执行的 Java actor 库

    即使 Java 6 和 Java 7 中引入并发性更新,Java 语言仍然无法让并行编程变得特别容易.Java 线程.synchronized 代码块.wait/notify 和java.util.c ...

  4. SQL中的几个判断是否存在

    库是否存在if exists(select * from master..sysdatabases wherename=N'库名')print 'exists'elseprint 'not exist ...

  5. jQuery焦点图插件

    在线演示 本地下载

  6. qt项目： error LNK2038: 检测到“_MSC_VER”的不匹配项: 值“1900”不匹配值“1800”

    error LNK2038: 检测到“_MSC_VER”的不匹配项:  值“1900”不匹配值“1800” 该错误 网上通常的解释是: 原因:由于你使用了vs2012,相比较vs2010以及之前的vs ...

  7. 使用redis做mysql缓存

    应用Redis实现数据的读写,同时利用队列处理器定时将数据写入mysql. 同时要注意避免冲突,在redis启动时去mysql读取所有表键值存入redis中,往redis写数据时,对redis主键自增 ...

  8. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  9. fabric查看本地与远程主机信息

    #!/usr/bin/pythonfrom fabric.api import *env.user='root'env.hosts=['172.10.224.183','172.10.224.132' ...

  10. spring security结合数据库验证用户-XML配置方式

    之前的用户信息我们都是使用的内存用户,测试例子可以,实际中使用肯定不行,需要结合数据库进行验证用户.这就是本节的重点: 项目目录如下:  在之前的项目中的依赖中添加两个依赖: <dependen ...