★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > 页面特效 > 正文

canvas绘制的文字如何换行

 2020/6/17 14:20:58  字体:  浏览 3564 我要评论
需要定制网站程序、公众号程序、微信小程序可以联系:565449214或者加微信13961347334(备注:需要技术)
或者在处理一些技术问题时,有什么不懂的地方,随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论
当前标签
canvas

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

后一页:没有了
相关阅读
( 2020/9/15 15:27:24 )uni-app与HTML的标签变化对比
( 2019/11/10 20:47:20 )安卓版微信中播放视频不自动全屏
( 2018/3/16 17:00:02 )利用aspJpeg组件生成多图片水印组合时给加上透明水印图片
( 2008/5/28 12:44:00 )IE6下用CSS使PNG半透明背景图片效果
( 2007/11/17 23:30:19 )网上页面java图片循环滚动特效
共有0条关于《canvas绘制的文字如何换行》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
uni-app
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
做在线客服时,聊天窗口的div滚动条始终在底部
javascript编写的网页版的打字测试程序
JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
支持火狐,IE6.ie7.ie8.ie9的加入收藏/设为首页代码
javascript在a标签中的一些操作
javascript自动获取Tags关键字
javascript自动获取Tags关键字
更多>>最新添加文章
uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用
uni-app用map组件建立微信小程序显示商家地图位置并且打上标志然后点标志进行调用手机地图导航到对应的地址
用uni-app开发微信小程序用uni.makePhoneCall拨打电话
uni.openLocation打开地图导航没反应解决方式(参数都设置对就是打不开)
各个苹果手表型号版本对比以及查看苹果手机Apple Watch型号
微信小程序腾讯视频播放组件tencentvideo(wxa75efa648b60994b)
微信小程序直播组件live-player-plugin(wx2b03c6e691cd7370)
jquery设置或获取修改classname
更多>>随机抽取信息
ASP与ACCESS数据库链接代码
页面文字变色、变大、还原
深山旅行社网站管理系统 v1.6
增大、缩小、还原字体
javascript表格内移动上下列,可以做成ajax加上动态程序做成上下移动顺序
loading图片
Dreamweaver错误:以下翻译器没有被装载,由于错误;xsltransform.htm;有不正确的设置信息
成功案例