html5 canvas的绘制文本自动换行的示例代码


Posted in HTML / CSS onSeptember 17, 2018

本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题:

一个150*100的canvas画布,加个边框明显边界

<canvas id="canvas" style="border:solid 1px darkgoldenrod;" width="200px" height="100px"></canvas>

我们先来看fillText()方法,strokeText()方法同理

html5 canvas的绘制文本自动换行的示例代码

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1;
var str = "假如生活欺骗了你,请不要悲伤!thank you!"
ctx.fillText(str,0,20);

可以看到fillText()在固宽的canvas中,字数过多的时候,并不会自动换行,我们可以增加canvas本身的宽度,但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候,有一个函数,context.measureText(text) 这个函数可以测量字体的宽高度,那就好办了,我们计算好我们字符串的长度加上一个大概的宽度,基本上可以处理这种换行的问题了。

下面看具体实现方法:

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1; 
var str = "假如生活欺骗了你,请不要悲伤!thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//计算canvas的宽度
var initHeight=15;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){ 
    lineWidth+=ctx.measureText(str[i]).width; 
    if(lineWidth>canvasWidth){  
        ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘制截取部分
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    } 
    if(i==str.length-1){//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
    }
}

见效果图:

html5 canvas的绘制文本自动换行的示例代码

算法:计算字符串str里面每个字符的宽度的和lineWidth,如果大于canvas的宽度,就截取这部分进行绘制,然后重置lineWidth,保存开始截取的最后的索引,当循环变量i为最后一个字符的时候,直接绘制剩余部分。

接下来:我们封装成一个方法,方便以后直接调用:

/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
*/
function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
    var ctx = canvas.getContext("2d"); 
    var lineWidth = 0;
    var canvasWidth = c.width; 
    var lastSubStrIndex= 0; 
    for(let i=0;i<str.length;i++){ 
        lineWidth+=ctx.measureText(str[i]).width; 
        if(lineWidth>canvasWidth-initX){//减去initX,防止边界出现的问题
            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
            initY+=lineHeight;
            lineWidth=0;
            lastSubStrIndex=i;
        } 
        if(i==str.length-1){
            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
        }
    }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 #HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 #HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 #HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 #HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 #HTML / CSS
用canvas画心电图的示例代码
Sep 10 #HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 #HTML / CSS
You might like
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JS实现页面打印功能
2017/03/16 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
js实现弹窗效果
2020/08/09 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python 经典数字滤波实例
2019/12/16 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
写给女生的道歉信
2014/01/08 职场文书
《春雨》教学反思
2014/04/24 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
浅析Python实现DFA算法
2021/06/26 Python
试了下Golang实现try catch的方法
2021/07/01 Golang
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server