专栏首页田超学前端微信小程序 canvas 循环画分行内容
原创

微信小程序 canvas 循环画分行内容

//循环内容的条数

for (var a = 0; a < content.length; a++) {

if (content[a] != "") { //去除空行

var str = content[a]

if (context.measureText(str).width > (width - 60)) { //判断一行的内容是否大于整行宽度

var chr = str.split("");

var temp = "";

var row = [];

for (var c = 0; c < chr.length; c++) {

if (context.measureText(temp).width < (width - 60)) {

;

}

else {

row.push(temp);

temp = "";

}

temp += chr[c];

}

row.push(temp);

//console.log(row)

for (var b = 0; b < row.length; b++) {

if (context.measureText(row[b]).width > (width - 60)) {

var sd = row[b]

if (b == 0) {

context.fillText(sd, 30, 460 + a * 50 + b * 20, width - 60); //画出第一部分

} else {

// context.fillText(sd, 30, 480 + a * 50, width - 60);

}

}

if (context.measureText(row[b]).width < (width - 60)) {

var f = row[b]

context.fillText(f, 30, 480 + a * 50, width - 60); //画出剩余部分

}

}

} else {

context.fillText(str, 30, 460 + a * 50, width - 60); //画出小于一行的数据

}

}

}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发:canvas 多行文字换行(二)

    微信小程序开发中,canvas画出一篇文章,由于句子长短不一,画起来确实是费劲,查了不少资料,总结一下:

    田超
  • 微信小程序 几个小技巧

    田超
  • 微信小程序 购物车代码

    在判断加减数量的时候,minusStatus 这个属性是被我写在了产品的外面,所以,没做减到1的的时候,减号改变颜色,需要的可以把minusStatus 这个属...

    田超
  • 在Jetson TX1上利用Tensorflow和ROS实现自主驾驶机器小车

    美国纳农工州立大学的Daniel Tobias利用Jetson TX1制作了一个机器赛车名叫Cherry Autonomous Racecar (CAR) 。 ...

    GPUS Lady
  • 图片滑动-兼容手机与pc端 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 设计模式02——Adapter模式

    适配器设计模式,顾名思义就是将适配器的作用总结抽象成为一种代码的组织方式,将现有的代码通过适配器进行适配,以满足项目对另外一个类或者接口的要求。换句话说就是将一...

    itlemon
  • 机器学习工程师31门课程(视频):从新手到专业

    机器学习不仅仅是模型 产生这个问题的原因就是所有人都以为机器学习的模型就是机器学习本身,以为对那些个算法理解了就是机器学习的大牛了,但实际上完全不是这样的。 ...

    机器学习AI算法工程
  • 在dell r610服务器上安装fedora15

       我是通过pxe方式安装的,开始的时候检测硬件的时候老是过不起,看提示大概是cpu 0 error ,开始以为是安装源的问题,重新下载,解压,问题依旧,后来...

    力哥聊运维与云计算
  • iOS线程生命周期的监控

    iOS系统通过Core Services层的Foundation框架提供基于OC语言的NSThread和NSOperationQueue类来实现对线程和线程池的...

    欧阳大哥2013
  • diango之基于内置视图CBS编程

    Class-based views是Django为解决建站过程中的常见的呈现模式而建立的。具有如下几个原则:

    菲宇

扫码关注云+社区

领取腾讯云代金券