小程序 canvas 画出圆形头像以及超出文本换行

image.png

直接上代码

        // 画出头像标题
        let avatarurl_width = 30;    //绘制的头像宽度
        let avatarurl_heigth = 30;  //绘制的头像高度
        let avatarurl_x = 20;  //绘制的头像在画布上的位置
        let avatarurl_y = 30;  //绘制的头像在画布上的位置
        ctx.save();
        ctx.beginPath(); //开始绘制
        //先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针

        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

        ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

        ctx.drawImage(this.httpPhoto, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

        ctx.draw(true);

超出换行

        /**
         * ctx： 画布的上下文环境
         * content： 需要绘制的文本内容
         * drawX： 绘制文本的x坐标
         * drawY： 绘制文本的y坐标
         * lineHeight：文本之间的行高
         * lineMaxWidth：每行文本的最大宽度
         * lineNum：最多绘制的行数
         */
        textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
          var drawTxt = ''; // 当前绘制的内容
          var drawLine = 1; // 第几行开始绘制
          var drawIndex = 0; // 当前绘制内容的索引

          // 判断内容是否可以一行绘制完毕
          if (ctx.measureText(content).width <= lineMaxWidth) {
            ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
          } else {
            for (var i = 0; i < content.length; i++) {
              drawTxt += content[i];
              if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
                if (drawLine >= lineNum) {
                  ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                  break;
                } else {
                  ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                  drawIndex = i + 1;
                  drawLine += 1;
                  drawY += lineHeight;
                  drawTxt = '';
                }
              } else {
                // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
                if (i === content.length - 1) {
                  ctx.fillText(content.substring(drawIndex), drawX, drawY);
                }
              }
            }
          }
        }