html+canvas+输入文字换行,canvas文字换行

上次项目中，涉及到文字换行的问题，如图

可谓将换行做到了极致

解决方法：

将文字换行封装为一个方法

/**

* 海报文字换行

fillTextWrap(ctx, text, x, y, maxWidth, lineHeight) {

// 设定默认最大宽度

const systemInfo = wx.getSystemInfoSync()

const deciveWidth = systemInfo.screenWidth

// 默认参数

maxWidth = maxWidth || deciveWidth

lineHeight = lineHeight || 20

// 校验参数

if (

typeof text !== 'string' ||

typeof x !== 'number' ||

typeof y !== 'number'

) {

return

}

// 字符串分割为数组

const arrText = text.split('')

// 当前字符串及宽度

let currentText = ''

let currentWidth

for (let letter of arrText) {

currentText += letter

currentWidth = ctx.measureText(currentText).width

if (currentWidth > maxWidth) {

ctx.fillText(currentText, x, y)

currentText = ''

y += lineHeight

}

if (currentText) {

ctx.fillText(currentText, x, y)

}

调用方法绘制文字

ctx.setFillStyle('red')

ctx.setFontSize(26)

// ctx.setTextAlign('center')

//使文字换行显示

const textHeightL = that.fillTextWrap(

ctx,

that.renderData.springScrolls.L,

50,

313-(that.renderData.springScrolls.L).length*26/2, //为了让文字垂直居中

18,

)

const textHeightR = that.fillTextWrap(

ctx,

that.renderData.springScrolls.R,

275,

313-(that.renderData.springScrolls.R).length*26/2,//为了让文字垂直居中

18,

)

OK，问题得到解决希望能帮到你们

html+canvas+输入文字换行,canvas文字换行相关推荐

HTML canvas 输入文字,关于Canvas写字
首先明确canvas是有一个font属性的.利用这个属性我们可以将输入的文字画到画布或者说是已有图片上.先进行最基本的:画布上写字. canvas写字测试您的浏览器不支持canvas标签 var c ...
html5 canvas签字,HTML5 canvas实现电子签名
1.为什么要用到BASE64编码的图片信息Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输.由于一些 ...
canvas.width和canvas.style.width区别以及应用
今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在 ...
Linux环境安装canvas,npm install canvas简明指南
安装环境:Mac OSX Mavericks 要使用Node.js的canvas库,直接通过npm命令安装,通常,会得到一个编译错误: $ npm install canvas ... > no ...
android canvas bitmap matrix,Canvas API详解(Part 3)Matrix和drawBitmapMash
本节引言:在Canvas的API文档中,我们看到这样一个方法:drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 这个Matrix可是有大文章的 ...
初识canvas，使用canvas做一个百分比加载进度的动画
canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...
java canvas画图,UWP Canvas绘图越界
我有一个画布(不是InkCanvas!),我可以在上面绘制Polylines . 这工作得很好,但是如下面的GIF所示,绘制出界限存在一个巨大的问题 . 我的画布在ScrollViewer中,Scro ...
【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
标题很难引人入胜,先放个效果图好了如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...
canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...
canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...

html+canvas+输入文字换行,canvas文字换行

html+canvas+输入文字换行,canvas文字换行相关推荐

最新文章

热门文章