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>
  • 相关阅读:
    KafkaOffsetMonitor
    锋利的KATANA
    用grunt搭建自动化的web前端开发环境
    网上书店订单功能的实现
    作用域和控制器
    使用CLK.AspNet.Identity提供以角色为基础的访问控制(RBAC)
    ABP日志管理
    .NET开源项目
    服务总线
    Message解析流程(转)
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6906617.html
Copyright © 2011-2022 走看看