zoukankan      html  css  js  c++  java
  • canvas 绘制文本

    <!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>
  • 相关阅读:
    20180420首旅酒店的操作记录
    股票的站上均线和反弹购买的学习
    linux里面的fork函数创建一个新进程
    allegro导入网表过程中出现的错误信息
    海思NB-IOT的SDK添加AT指令方法
    如何在ubuntun中安装pycharm并将图标显示在桌面上
    流畅python学习笔记:第十九章:动态属性和特性
    一起来学linux:目录与路径
    一起来学linux:用户与用户组
    python自动化运维五:pexpect
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6906617.html
Copyright © 2011-2022 走看看