canvas绘制的文字如何换行

最新推荐文章于 2023-10-17 12:53:24 发布

weixin_30652897

最新推荐文章于 2023-10-17 12:53:24 发布

阅读量648

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xutongbao/p/9924822.html

版权

<html>

<head>
    <title>canvas绘制的文字如何换行</title>
    <style type="text/css">

    </style>
</head>

<body>
    <canvas id="canvas" height="400" width="400"></canvas>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
    $(function() {
        var myAction = {};

        $.extend(myAction, {
            drawText: function(t, x, y, w) {
                var c = document.getElementById("canvas");
                var context = c.getContext("2d");
                var chr = t.split("");
                var temp = "";
                var row = [];

                context.font = "20px Arial";
                context.fillStyle = "black";
                context.textBaseline = "middle";

                for (var a = 0; a < chr.length; a++) {
                    if (context.measureText(temp).width < w) {;
                    } else {
                        row.push(temp);
                        temp = "";
                    }
                    temp += chr[a];
                }

                row.push(temp);

                for (var b = 0; b < row.length; b++) {
                    context.fillText(row[b], x, y + (b + 1) * 20);
                }
            },
            initData: function() {
                myAction.drawText("Hello, World!What a nice day.", 0, 0, 110);
            }
        })

        var init = function() {
            myAction.initData();
        }();
    });
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/xutongbao/p/9924822.html

weixin_30652897

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制的文字如何换行

<html><head> <title>canvas绘制的文字如何换行</title> <style type="text/css"> </style></head><body> <canvas id="canva...
复制链接

扫一扫