canvas之文字换行

当canvas的宽度不够宽时，canvas不会自动换行，可以用下面的代码处理

<body><canvas id="canvas" width="200" height="200" style="background:pink;"></canvas><script>function draw() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var str = "当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理";var canvasWidth = ctx.canvas.width;ctx.font = "20px Microsoft";console.log(ctx.measureText(str))canvas.height = Math.ceil(ctx.measureText(str).width / canvasWidth) * 25;ctx.font = "16px Microsoft"; //重新定义画布的高度后，需要重新定义字体的大小，否则变成默认值var initHeight = 25; //绘制字体距离canvas顶部初始的高度var lastSunStrIndex = 0; //每次开始截取的字符串的索引var contentWidth = 0;if (ctx.measureText(str).width <= canvasWidth) {ctx.fillText(str, 0, initHeight);return}for (let i = 0; i < str.length; i++) {contentWidth += ctx.measureText(str[i]).width;if (contentWidth > canvasWidth - 32) {ctx.fillText(str.substring(lastSunStrIndex, i), 12, initHeight) //绘制未截取的部分initHeight += 25;contentWidth = 0;lastSunStrIndex = i;}if (i == str.length - 1) {ctx.fillText(str.substring(lastSunStrIndex, i + 1), 12, initHeight);}}}draw()</script>
</body>

关于canvas 绘制文本的方法与样式设置

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

设置样式

font = value

当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value

文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

textBaseline = value

基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value

文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

canvas之文字换行相关推荐

html+canvas+输入文字换行,canvas文字换行
上次项目中,涉及到文字换行的问题,如图可谓将换行做到了极致解决方法: 将文字换行封装为一个方法 /** * 海报文字换行 */ fillTextWrap(ctx, text, x, y, maxW ...
画布海报头像放进二维码里面
const app = getApp();Page({/*** 页面的初始数据*/data: {userInfo: {},isOverShare: true},/*** 生命周期函数--监听页面加载* ...
教书育人楷模推荐报告_四个在线学习提示，以了解您是否在今年秋天教书
教书育人楷模推荐报告 As the fall semester approaches, many teachers are banging their heads as they struggle w ...
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
小程序保存海报，canvas绘制然后保存到相册，canvas文字换行计算
一.小程序保存海报,canvas绘制然后保存到相册 1.wxml <view class="box-canvas"><canvas canvas-id='myCa ...
canvas 画背景图以及文字换行的写法
// 文字换行的设置setCompanyTitle(){let width = 0.13;let height = 0.35;this.ctx.font="14px Verdana" ...
canvas文字换行处理
项目中需要用到canvas绘图,关于文字换行的处理一直没找到合适的解决方案,于是自己动手撸了一个. 函数实现的功能: 1.设置最大行数(最多多少行),超出部分用省略号(-)表示. 2.最大行数(lin ...
h5　canvas　　在canvas上画图　在canvas上写字　文字换行
//canvas文字换行function write_text_other_line_auto(ctx,font,align,color,text,x,y,line_count,line_height ...

canvas之文字换行

textAlign = value

canvas之文字换行相关推荐

最新文章

热门文章