HTML5-Canvas绘图字符串

最新推荐文章于 2022-08-09 22:37:37 发布

MatrixSparse

最新推荐文章于 2022-08-09 22:37:37 发布

阅读量2k

点赞数

分类专栏： Web前端文章标签： html5 2d

本文链接：https://blog.csdn.net/qq_25371579/article/details/51512274

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML5-Canvas绘制字符串

CanvasRenderingContext2D对象，为绘制文字提供了以下两个方法：

fillText(String text,float x,float y,[float maxwidth]):填充字符串
strokeText(String text,float x,float y,[float maxwidth])：绘制边框
font="bold 45px宋体"
textAlign：设置绘制字符串的水平对齐方式,start|end|right|center
textBaseAlign：垂直对齐方式：top|hanging|middle|alphabetic|bottom

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body onload="init()">

        <canvas id="can" width="1200" height="300" style="border:1px solid red;"></canvas>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
        function init(){
            var can = document.getElementById("can");
            var ctx = can.getContext("2d");

            // 实心的字体
            // 对齐
            ctx.textAlign = "start"
            ctx.fillStyle = "#369"
            ctx.font = "34px 微软雅黑";
            ctx.fillText("大家好",100,150);

            // 空心的字体
            ctx.strokeStyle = "#369"
            ctx.font = "44px bold 微软雅黑";
            ctx.strokeText("大家好",100,250);
        }
        </script>
    </body>

</html>

MatrixSparse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-Canvas绘图字符串

HTML5-Canvas绘制字符串CanvasRenderingContext2D对象，为绘制文字提供了以下两个方法：fillText(String text,float x,float y,[float maxwidth]):填充字符串strokeText(String text,float x,float y,[float maxwidth])：绘制边框font="bold 45px宋体"
复制链接

扫一扫