zoukankan      html  css  js  c++  java
  • -_-#【Canvas】绘制文本

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="drawing" width="200" height="200" style="background:gray;">A drawing of something</canvas>
        <script>
            var drawing = document.getElementById('drawing')
            if (drawing.getContext) {
                var context = drawing.getContext('2d')
    
                context.font = 'bold 14px arial'
                context.textAlign = 'center'
                context.textBaseline = 'middle'
                context.fillText('12', 100, 20)
    
                // 如果将 textAlign 设置为"start",则 x 坐标表示的是文本左端的位置
                context.textAlign = 'start'
                context.fillStyle = 'rgba(0,0,255,0.5)'
                context.fillText('12', 100, 40)
    
                // 则 x 坐标表示的是文本右端的位置
                context.textAlign = 'end'
                context.fillStyle = 'rgba(255,0,0,0.5)'
                context.fillText('12', 100, 60)
    
                context.textAlign = 'start'
                var fontSize = 100
                context.font = fontSize + 'px arial'
    
                // 返回一个 TextMetrics 对象。返回的对象目前只有一个 width 属性,但将来还会增加更多度量属性
                while (context.measureText('Hello world!').width > 140) {
                    fontSize--
                    context.font = fontSize + 'px arial'
                }
                context.fillText('Hello world!', 10, 10)
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    newusers和chpasswd
    docker container link
    ambassador docker container linking
    Forwarding a Range of Ports in VirtualBox
    NekoHTML and Dom4j
    MySQL DATE_FORMAT() 函数
    POJ 1236 Network of Schools(强连通缩点)
    HDU 1269 迷宫城堡(强连通)
    Codeforces 581C Developing Skills
    HDU 3849(桥)
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3624639.html
Copyright © 2011-2022 走看看