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

canvas绘制的文字如何换行

 2020/6/17 14:20:58  字体:  浏览 619 我要评论
当前标签
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>

后一页:没有了
相关阅读
( 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 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
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关键字
更多>>最新添加文章
jquery实现移动端下拉加载刷新更多信息
删除程序页面代码中的注释标签
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
asp利用hasOwnProperty验证某个json中的某个标签是否存在
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
fiddler抓包在内容的SyntaxView窗口里面是乱码
更多>>随机抽取信息
判断输入字符串中是否含有危险字符
如果你每天上网超过4个小时请按照以下方法做。
利用ASP正则提取文章里面的图片的有效的src地址
asp文章内容自定义分页
网站已经整理了整站下载失效问题
绝对管用的iis安装包下载
另外的一种可以计算的倒计时效果
超级酷的滚动条颜色代码生成器