订阅本栏目 RSS您所在的位置: 深山工作室 > 页面特效 > 正文

canvas绘制的文字如何换行

2020/6/17 14:20:58 字体: 浏览 4008

<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>

前一页:没有了
相关阅读
振辉自清洗过滤器
深山留言板(9.10教师节模板)
非常漂亮的当前页面内容搜索代码
金岸国际旅行社
利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示
利用CSS让网页里的提交按钮变得更漂亮
浅论网页优化和网站优化的方式
深山留言板系统(七夕情人节留言板专用模板) v3.7
共有0条关于《canvas绘制的文字如何换行》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
更多>>同类信息
canvas绘制的文字如何换行
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
js兼容多个浏览器右下角漂浮广告
兼容ie6+和火狐的禁止右键
做在线客服时,聊天窗口的div滚动条始终在底部
javascript 表单(文本框)触发鼠标事件大全
更多>>最新添加文章
名扬石化设备
连云港振辉旋膜式除氧器
亿菇缘
消声器
放心会计
汽液两相流
连云港门窗制作
胶球清洗
更多>>随机抽取信息
振辉自清洗过滤器
javascript实现图片预览功能
JavaScript技巧:让网页自动穿上外套
04 正常使用运行深山留言板
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
仿百度知道宽度高度自适应的圆角边框