小程序canvas多行文字

古城微笑少年丶 2022-04-24 01:32 271阅读 0赞

**效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

**使用：**

var that = this;

const ctx = wx.createCanvasContext('savePic');

var colorText = '肤色晶莹白皙，肤质细腻有透明感，适合搭配一些颜色明亮、轻快一点的色彩，营造轻盈感。';

that.draw\_long\_text(colorText, ctx, 46, 1271);

**封装：**

//canvas文字自动换行封装

/\*

longtext 文案

cxt 对应的canvas

begin\_width 开始位置的X坐标

begin\_height 开始位置的Y坐标

\*/

draw\_long\_text: function (longtext, cxt, begin\_width, begin\_height) \{

var linelenght = 45;//行高

var text = "";

var count = 0;

var begin\_width = begin\_width;

var begin\_height = begin\_height;

var stringLenght = longtext.length;

var newtext = longtext.split("");

var context = cxt;

context.textAlign = 'left';

for (var i = 0; i <= stringLenght; i++) \{

if (count == 22) \{//count一行显示多少个字

context.fillText(text, begin\_width, begin\_height);

begin\_height = begin\_height + linelenght;

text = "";

count = 0;

\}

if (i == stringLenght) \{

context.fillText(text, begin\_width, begin\_height);

\}

var text = text + newtext\[0\];

count++;

newtext.shift();

\}

\},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20220221/5ee0bf309e244df09e4d2835bd498058.png

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序canvas多行文本（可以兼容英文）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

墨蓝/ 2022年12月13日 09:53/ 0 赞/ 8 阅读

相关小程序canvas签字功能

先看效果图 ![在这里插入图片描述][20200913201220223.gif_pic_center] 上代码 canvas.wxml <canvas

Dear 丶/ 2022年12月06日 15:05/ 0 赞/ 203 阅读

相关小程序canvas高斯模糊

//以下是小程序html代码 <canvas canvas-id="canvasIn" class="canvas"></canvas> <canv

缺乏、安全感/ 2022年09月08日 12:54/ 0 赞/ 267 阅读

相关小程序 canvas旋转文字

小程序实现：效果如下图： ![70][] js部分： //canvas画图片 savedetailCanvas : function () \{ //

末蓝、/ 2022年05月21日 06:28/ 0 赞/ 581 阅读

相关小程序canvas多行文字

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

古城微笑少年丶/ 2022年04月24日 01:32/ 0 赞/ 272 阅读

相关 19.微信小程序之canvas绘制多行文本（更新版：绘制时间更短）

之前绘制完成了canvas绘制多行文本，实现自动换行，支持换行符换行。（详情看这里：[https://blog.csdn.net/panzina/article/detai

ゝ一纸荒年。/ 2022年04月22日 20:22/ 0 赞/ 212 阅读

相关 18.微信小程序之canvas绘制多行文本自动换行，支持换行符换行

canvas中的文本由用户输入，因此需要把一堆文字进行换行。当用户按下回车键进行换行时，也得将换行信息绘制出来。 drawText:function(ctx,item

心已赠人/ 2022年03月30日 16:12/ 0 赞/ 1000 阅读

相关 Canvas--文字

文章目录文字的绘制文字的对齐水平对齐垂直居中获取文本宽度文字的绘制在Canvas中绘制文字，可以使用`s

待我称王封你为后i/ 2021年12月14日 22:07/ 0 赞/ 555 阅读

相关微信小程序 - 单行/多行文本省略号

多行文本省略号 .box{ display: -webkit-box; overflow: hidden; text-overflo

比眉伴天荒/ 2021年09月30日 03:14/ 0 赞/ 271 阅读

相关小程序canvas的一个坑

很奇怪，原来好好的，结果现在显示乱了，模拟器和手机都不一样。模拟器上，整个canvas都往右偏移了，手机上，右侧有一大片空白。反复试验，发现问题是：page的对齐方式

Love The Way You Lie/ 2021年09月17日 13:38/ 0 赞/ 354 阅读