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

    文字绘制;

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>text</title>
    </head>
    
    <body>
        <canvas id='myCanvas' width='800' height='400'>
            your browser does not support canvas
        </canvas>
        <script type="text/javascript">
        var c = document.getElementById('myCanvas');
        var cxt = c.getContext('2d');
        cxt.beginPath();
        cxt.font = '30px Arial';
        var txt = 'Hello World';
        cxt.fillText(txt, 100, 50);
        cxt.strokeStyle = 'red';
        cxt.moveTo(100, 50); // 字体坐标是左下角坐标
        cxt.lineTo(300, 50);
        cxt.moveTo(100, 20); // 字体30px不是30像素
        cxt.lineTo(300, 20);
        cxt.font = '30pt Arial';
        cxt.strokeText(txt, 280, 50); // 字体30pt是30像素
    
        cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px
        cxt.moveTo(100, 100);
        cxt.lineTo(150, 100); // 文本宽度是50像素
        cxt.stroke();
    
        // 文本对齐的方式
        cxt.moveTo(100, 150);
        cxt.lineTo(200, 150);
        cxt.moveTo(100, 130);
        cxt.lineTo(200, 130);
        cxt.moveTo(100, 170);
        cxt.lineTo(200, 170);
        cxt.moveTo(150, 120);
        cxt.lineTo(150, 180);
        cxt.stroke();
        cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样
        cxt.textAlign = 'center'; //center,end,left,right,start
        cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top
        cxt.fillText('A', 150, 150);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    ROS2概述和实践入门
    ROS2与FastRTPSROS2与FastRTPS
    RoboWare Studio已经停更
    ubuntu20.04 Roboware安装遇到的问题
    Ubuntu16.04安装ROS2
    拥抱ROS2系列:ROS2概述和实践入门(一)
    clash for Linux安装使用
    Ubuntu 安装RoboWare
    Ubuntu 18.04 安装VSCode
    开源ImageFilter库For IOS源码发布
  • 原文地址:https://www.cnblogs.com/stono/p/4667465.html
Copyright © 2011-2022 走看看