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实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python读写docx文件的方法
2018/05/08 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
优秀员工推荐材料
2014/12/20 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL