<!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. vue移动端 滚动 鼠标按下效果

    <div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)&q ...

  2. C#属性器Get和Set

    public sealed class classroom { private List<string> student = new List<string>(); priva ...

  3. ［ufldl］Supervised Neural Networks

    要实现的部分为:forward prop, softmax函数的cost function,每一层的gradient,以及penalty cost和gradient. forwad prop forw ...

  4. spring配置中classpath: 与classpath*:的区别

    classpath和classpath*区别:  classpath:只会到你的class路径中查找找文件. classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找 ...

  5. NEVER QUIT. NEVER SAY NEVER.

    有志者不是从不失败,而是从不妥协. NEVER QUIT. NEVER SAY NEVER. 2015/09/15 Winners are not those who never fail but t ...

  6. 20145219 《Java程序设计》第16周课程总结

    20145219 <Java程序设计>第16周课程总结 每周读书笔记(即学习总结)链接汇总 第0周问卷调查 第1周读书笔记 第2周读书笔记 第3周读书笔记 第4周读书笔记 第5周读书笔记 ...

  7. Java多线程基础知识总结笔记

    本篇笔记记录一些在Java多线程编程中常见的关键字,比较简单和基础的就不写太详细了. 一.Thread类(其实也是应用了Runnable接口)和Runnable接口(只有一个run方法,应用该类必须重 ...

  8. [Usaco2008 Open]Word Power 名字的能量

    1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 408  Solved: 19 ...

  9. 举例讲解Linux中tcpdump工具的应用

    先来看一个比较基本的用法: tcpdump -i eth0 其中,eth0为参数值,表示需要抓包的网口,这是个必需参数哦. tcpdump的具体参数及意义: -i:指定tcpdump监听的网络接口 - ...

  10. Java学习笔记50：JSONObject与JSONArray的使用（转）

    Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...