<!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. matplotlib作图——plot() 线图

    线图 #定义 matplotlib.pyplot.plot() plot([x], y, [fmt], data=None, **kwargs) plot([x], y, [fmt], [x2], y ...

  2. str()和repr()（以及``操作符）

    内建函数str()和repr()或反引号操作符(``)可以方便的获取字符串. str它会把值转换为合理形式的字符串,可读性更好,同时对用户来说更加友好. repr它会创建一个字符串,以合法的Pytho ...

  3. Linux用户、群组及权限

    由于对文件的操作需要切换到相应文件夹下进行,所以对文件内容的修改,最基本的是需要其文件夹执行的权限. 文件夹的读权限(read)可以独立行使,但是对文件夹内容的写权限(对其内文件的新建.删除.重命名) ...

  4. netty3---传统IO，NIO，nettyIO

    传统: NIO: nettyIO: 每个服务生负责一个区域,每个服务生是一个线程.

  5. python中命令行参数

    python中的命令行参数 python中有一个模块sys,sys.argv这个属性提供了对命令行参数的访问.命令行参数是调用某个程序时除程序名外的其他参数. sys.argv是命令行参数的列表 le ...

  6. 20145219 《Java程序设计》第10周学习总结

    20145219 <Java程序设计>第10周学习总结 教材学习内容总结 Java的网络编程 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 网络概述 1.计算机 ...

  7. 《Python学习手册》（三）

    string 字符串,和列表.元组,都适用序列操作. 关于python转义字符 迭代 for x in S: print(x) [c * 2 for c in S] Comparasion: > ...

  8. shell编程学习笔记之标准输入输出（read&echo）

    2017-07-17 09:32:07 输入read: 用途: 从标准输入读取一行,或者从文件描述符FD(file descriptor)中读取一行,并且将其分割成字段. 用法: read [-ers ...

  9. js 的编译

    js和其他语言一样,也是需要编译的,代码编译发生在代码执行之前,js代码的编译会经历如下几个阶段 1.分词,词法分析  这个过程会将由字符串组成的字符分解成有意义的代码块,这些代码块称为词法单元,例如 ...

  10. [洛谷3041]视频游戏的连击Video Game Combos

    题目描述 Bessie is playing a video game! In the game, the three letters 'A', 'B', and 'C' are the only v ...