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的定位页面元素
Aug 29 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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
php 什么是PEAR?
2009/03/19 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
如何重置vue打印变量的显示方式
2017/12/06 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python使用urllib2提交http post请求的方法
2015/05/26 Python
简单谈谈python的反射机制
2016/06/28 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python 多个参数不为空校验方法
2019/02/14 Python
简单了解python代码优化小技巧
2019/07/08 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
小学音乐教学反思
2014/02/05 职场文书
职务聘任书范文
2014/03/29 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
公务员政审个人总结
2015/02/12 职场文书
推广普通话的宣传语
2015/07/13 职场文书
决心书格式及范文
2019/06/24 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android