canvas 写字换行

示例如下
[pcsh lang="js" tab_size="4" message="" hl_lines="" provider="manual"]
<html>

    <head>
        <meta charset="utf-8">
        <title>canvas写字换行</title>
    </head>

    <body>
        <style>
            #stage {
                background: rgb(200, 200, 200);
            }
        </style>
        <canvas id="stage" width="200" height="200"></canvas>
        <input id="input" type="text" placeholder="请输入文字">
        <script>
            // canvas
            var c = document.getElementById("stage");
            var ctx = c.getContext("2d");
            var stageWidth = 200;
            var stageHeight = 200;
            var lineHeight = 20;

            // input
            var i = document.getElementById('input');
            i.addEventListener('change', function() {
                var str = i.value;
                writeTextOnCanvas(ctx, lineHeight, 9, str)
            })

            function writeTextOnCanvas(cns, lh, rw, text) {
                var ctx = cns;
                var lineheight = lh;
                var text = text;

                ctx.width = cns.width;
                ctx.height = cns.height;

                ctx.clearRect(0, 0, stageWidth, stageHeight);
                ctx.font = lineheight + "px 微软雅黑";
                ctx.fillStyle = "#f00";

                function getTrueLength(str) { //获取字符串的真实长度（字节长度）
                    var len = str.length,
                    truelen = 0;
                    for(var x = 0; x < len; x++) {
                        if(str.charCodeAt(x) > 128) {
                            truelen += 2;
                        } else {
                            truelen += 1;
                        }
                    }
                    return truelen;
                }

                function cutString(str, leng) { //按字节长度截取字符串，返回substr截取位置
                    var len  = str.length,
                        tlen = len,
                        nlen = 0;
                    for(var x = 0; x < len; x++) {
                        if(str.charCodeAt(x) > 128) {
                            if(nlen + 2 < leng) {
                                nlen += 2;
                            } else {
                                tlen = x;
                                break;
                            }
                        } else {
                            if(nlen + 1 < leng) {
                                nlen += 1;
                            } else {
                                tlen = x;
                                break;
                            }
                        }
                    }
                    return tlen;
                }
                for(var i = 1; getTrueLength(text) > 0; i++) {
                    var tl = cutString(text, rw);
                    ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), 10, i * lineheight);
                    text = text.substr(tl);
                }
            }
        </script>
    </body>

</html>
[/pcsh]
最后更新于 2017-03-17 15:58:08 并被添加「」标签，已有 396 位童鞋阅读过。
GuojinH5

canvas 写字换行

此处评论已关闭
