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让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
如何在PHP中使用数组
2020/06/09 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
React Native预设占位placeholder的使用
2017/09/28 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
js实现简单放大镜效果
2020/03/07 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python实现截屏的函数
2015/07/25 Python
Python算法应用实战之队列详解
2017/02/04 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
如何在pycharm中安装第三方包
2020/10/27 Python
网站域名和主机:Domain.com
2019/04/01 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
电子商务专业自荐信
2014/06/02 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
离婚协议书范本
2015/01/26 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫