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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
德生PL550的电路分析
2021/03/02 无线电
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python三元运算实现方法
2015/01/12 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python psutil模块使用方法解析
2019/08/01 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
身边的榜样活动方案
2014/08/20 职场文书
九华山导游词
2015/02/03 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
PHP RabbitMQ消息列队
2022/05/11 PHP
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python