<!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. Python:笔记(5)——错误、调试和测试

    Python:笔记(5)——错误.调试和测试 错误处理 1.TRY语句 这个和Java中的语法是及其相似的,catach换成except. 说明:同样,不管有没有错误,fianlly都会执行的! 补充 ...

  2. 什么是EventLoop

    Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. 本文参考C. Aaron Cois的<Und ...

  3. 对Java 静态代码块的一些了解

    一 般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情 况下,其他程序来调用的时候,需要使用静态方法,这种 ...

  4. Rock-Paper-Scissors-Lizard-Spock Python实现

    初学python,实现一些很有意思的小游戏是很能提高编程能力的. Rock-Paper-Scissors-Lizard-Spock http://en.wikipedia.org/wiki/Rock- ...

  5. datagrid 用法

    http://blog.csdn.net/xhhuang1979/article/details/8331682

  6. hadoop13---centos安装jdk

    由于各Linux开发厂商的不同,因此不同开发厂商的Linux版本操作细节也不一样,今天就来说一下CentOS下JDK的安装: 方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创 ...

  7. zabbix监控php-fpm的性能

    zabbix监控php-fpm主要是通过nginx配置php-fpm的状态输出页面,在正则取值 要nginx能输出php-fpm的状态必须要先修改php-fpm的配置,这个配置没有开启nginx 就没 ...

  8. 20145109《Java程序设计》第二周学习总结

    20145109 <Java程序设计>第二周学习总结 教材学习内容总结 Variable : naming rule : Camel case no default value e.g : ...

  9. [BZOJ2342]双倍回文

    对每个大中心暴力找小中心即可. 代码: #include<iostream> #include<cstdio> #include<cstring> #define ...

  10. Spring注解（环境）

    以数据库为例: 引入 c3p0数据源maven坐标 数据库驱动 @Configuration @PropertySource("classpath:/db.config.properties ...