微信小程序canvas单元格内容（文字）

﹏ヽ暗。殇╰゛Y 2021-11-10 13:26 487阅读 0赞

前几天用canvas画了一个表格，这个方法是每个表格里面内容的画法。

function writecon(text, maxWidth, fontSize, color, left, top) { 
        var that = this;
        var centerPosition = left + maxWidth/2;
        ctx.beginPath();
        ctx.setFillStyle(color);
        ctx.setFontSize(fontSize);
        ctx.setTextBaseline('top');
        ctx.setTextAlign('center');
        var space = fontSize + 5;
        var curleft = 0;
        var height=top+space/2;
        var lastSubStrIndex = 0;
        for (var i in text) { 
          curleft += ctx.measureText(text[i]).width;
          if (curleft > maxWidth / 8 * 7) { 
            curleft = 0;
            ctx.fillText(text.substring(lastSubStrIndex, i), centerPosition, height);
            ctx.save();
            height += space;
            lastSubStrIndex = i;
          }
          if (i == text.length - 1) { 
            curleft = 0;
            ctx.fillText(text.substring(lastSubStrIndex, i + 1), centerPosition, height);
            ctx.save();
            height += space;
          }
    
        }
        ctx.save();
        height += space /2;
        return {  top: height};
      }

发表评论取消回复

表情：

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

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

相关阅读

相关 mpvue 微信小程序canvas生成海报

mpvue 微信小程序canvas生成海报效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

小鱼儿/ 2023年06月19日 09:34/ 0 赞/ 79 阅读

相关微信小程序中的canvas

文章目录 canvas 常用属性： canvas基本用法：注意： canvas绘制基本步骤： canvas绘制笑脸： canv

灰太狼/ 2022年11月16日 01:37/ 0 赞/ 716 阅读

相关微信小程序-海报制作（canvas）

文档 [https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreen

落日映苍穹つ/ 2022年10月08日 05:40/ 0 赞/ 456 阅读

相关微信小程序九宫格实现

一、概述效果图 ![3a28da06960fcd05b38be6f5a66908bb.png][] 二、实现定义数据源 test.js Page

我不是女神ヾ/ 2022年10月05日 15:59/ 0 赞/ 242 阅读

相关小程序 canvas旋转文字

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

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

相关微信小程序-基于canvas画画涂鸦

> 代码地址如下： > [http://www.demodashi.com/demo/14461.html][http_www.demodashi.com_demo_144

太过爱你忘了你带给我的痛/ 2022年03月10日 08:44/ 0 赞/ 328 阅读

相关微信小程序——复制文字

查看微信文档剪贴板API：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.setClipboardData.

矫情吗；*/ 2022年01月29日 14:34/ 0 赞/ 492 阅读

相关 Canvas--文字

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

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

相关微信小程序canvas单元格内容（文字）

前几天用canvas画了一个表格，这个方法是每个表格里面内容的画法。 function writecon(text, maxWidth, fontSize, colo

﹏ヽ暗。殇╰゛Y/ 2021年11月10日 13:26/ 0 赞/ 488 阅读

相关微信小程序单元测试

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 在编写高质量的自定义组件过程中，单元测试是永远避不开的一个话题。完善的测试用例是提高自定义组件可

冷不防/ 2021年09月08日 20:30/ 0 赞/ 362 阅读