小程序canvas大全，（圆弧角，画圆，图片短边展示，多行省略，不影响布局）

拼搏现实的明天。 2021-11-08 23:32 440阅读 0赞

## 先上效果图：  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

# #

## wxml: ##

//生成图片时显示，其余时间隐藏起来，根据css一起使用
    <view class='canvas-box'>
      <canvas canvas-id='canvas' style='width:{
       {windowW}}px;height:{
       {windowH}}px;' wx:if="{
       {hideCanvas}}"></canvas>
    </view>

## wxss: ##

/*再外侧包一个view，然后给view定位出去，就达到了隐藏的效果*/
    .canvas-box{
      position: fixed;
      left: 10000px;
    }

## js:  ##

const { roundRect, roundImage, drawTextOverflow } = require("../../utils/util.js");
    let rpx;  //宽度%比   适配手机宽度
    let xh;  //高宽比     适配手机高度
    page({
        data: {
        windowW: '',   //设备宽高
        windowH: '',  
        canvasQr: '',   //二维码图片
        canvasDetail: '', //详情项目图片地址
        clip_left: '',//左偏移值，
        clip_top: '', //上偏移值
        clip_width: '',//截取宽度，截取高度
        clip_height: '',
        hideCanvas:false,  //canvas的隐藏
        detailData: {},   //我的数据，自行改动
    }
    
    _downImg:function(e){
        wx.getSystemInfo({
          success: function(res) {
            rpx = res.windowWidth / 375;
            xh = res.windowHeight / res.windowWidth
            _this.setData({
              windowW: res.windowWidth,
              windowH: res.windowHeight,
              scrollerHeight: res.windowHeight - (res.windowWidth / 750) * 120
            })
          }
        });
        console.log(e)
        //这里是我调的接口得到的动态图片，你们根据自己要求去改
        this.wxFileImg(e.detail.codeUrl);
        wx.showLoading({
          title: '正在生成图片中',
          mask: true
        })
        this.setData({
          hideCanvas:true,
        })
      },
      //网络图片转临时 所有的网络图都要转一下，要不然有的真机不显示网络图片。  画布图片太多，就会很卡
      wxFileImg: function (codeUrl) {
        let _this = this;
        wx.downloadFile({
          url: codeUrl,
          success: function (resQrFile) {
            _this.setData({
              canvasQr: resQrFile.tempFilePath
            })
            wx.downloadFile({
              url: _this.data.detailData.logo,
              success: function (resDetailFile) {
                wx.getImageInfo({
                  src: resDetailFile.tempFilePath,
                  success(resDetailInfo) {
                    let img_width = resDetailInfo.width,
                      img_height = resDetailInfo.height;
                    //左偏移值，上偏移值，截取宽度，截取高度
                    let clip_left, clip_top, clip_width, clip_height;
    
                    clip_height = img_width ;
                    if (clip_height > img_height) {
                      clip_height = img_height;
                      clip_width = clip_height;
                      clip_left = (img_width - clip_width) / 2;
                      clip_top = 0;
                    } else {
                      clip_left = 0;
                      clip_top = (img_height - clip_height) / 2;
                      clip_width = img_width;
                    }
                    _this.setData({
                      canvasDetail: resDetailFile.tempFilePath,
                      clip_left,
                      clip_top,
                      clip_width,
                      clip_height
                    })
                    //画布id
                    let canvas = wx.createCanvasContext('canvas');
                    _this.canvasdraw(canvas);
                  }
                })
              }
            })
          }
        })
      },
      canvasdraw: function (canvas) {
        let _this = this;
        let windowW = _this.data.windowW;
        let windowH = _this.data.windowH;
        let canvasQr = _this.data.canvasQr;
        let canvasDetail = _this.data.canvasDetail;
        let clip_left = _this.data.clip_left;
        let clip_top = _this.data.clip_top;
        let clip_width = _this.data.clip_width;
        let clip_height = _this.data.clip_height;
        let detailData = _this.data.detailData;
    
        // 整画布 背景
        canvas.setFillStyle('#EFEFEF');
        canvas.fillRect(0, 0, windowW, windowH);
        canvas.draw(true);
        // 主画布
        console.log(xh)
        // 由于手机的高宽比不同，适配主画布的高度，可以根据自己的画布要求自行调整
        if (xh > 1.9) {
          roundRect(canvas, 15 * rpx, 100 * rpx, windowW * 0.92, windowH * 0.65, 10 * rpx, '#FFFFFF');
        } else if (xh > 1.8)  {
          roundRect(canvas, 15 * rpx, 80 * rpx, windowW * 0.92, windowH * 0.75, 10 * rpx, '#FFFFFF');
        }else{
          roundRect(canvas, 15 * rpx, 80 * rpx, windowW * 0.92, windowH * 0.8, 10 * rpx, '#FFFFFF');
        }
    
        //详情图片
        roundImage(canvas, 10 * rpx, canvasDetail, clip_left, clip_top, clip_width, clip_height, 15 * rpx, 30 * rpx, 345 * rpx, 245 * rpx, '#ffffff');
        //遮挡图片圆角
        roundRect(canvas, 15 * rpx, 210 * rpx, windowW * 0.92, 90 * rpx, 10 * rpx, '#FFFFFF');
        // 项目名称 2行展示
        drawTextOverflow(canvas, detailData.title, 305 * rpx, 2, 24, "#333", 28, 35 * rpx, 260 * rpx);
    
        // 项目价格
        canvas.setFontSize(20);
        canvas.fillStyle = "#DD2534";
        canvas.setTextAlign('left');
        //文字加粗  这里是利用了两个文字重叠实现的加粗效果 坐标偏移了半个像素的位置
        canvas.fillText(detailData.priceText, 35 * rpx, 319.5 * rpx);
        canvas.fillText(detailData.priceText, 34.5 * rpx, 320 * rpx);
        // 项目区域
        canvas.setFontSize(16);
        canvas.fillStyle = "#666666";
        canvas.setTextAlign('left');
        canvas.fillText(detailData.district, 35 * rpx, 350 * rpx);
    
        // 项目面积
        canvas.setFontSize(16);
        canvas.fillStyle = "#666666";
        canvas.setTextAlign('left');
        canvas.fillText(detailData.landAreaText || detailData.houseSizeText, 35 * rpx, 380 * rpx);
    
        //二维码
        canvas.drawImage(canvasQr, 35 * rpx, 410 * rpx, 100 * rpx, 100 * rpx);
    
        //名字
        canvas.setFontSize(16);
        canvas.fillStyle = "#333333";
        canvas.setTextAlign('left');
        canvas.fillText(detailData.userName, 155 * rpx, 445 * rpx);
        // 线
        canvas.beginPath();
        // 这里要是设置为1  线的颜色就很深而且线比较粗
        canvas.setLineWidth(0.1);
        canvas.setFillStyle('#EFEFEF');
        canvas.moveTo(155 * rpx, 460 * rpx);
        canvas.lineTo(325 * rpx, 460 * rpx);
        canvas.stroke();
    
        // 提示
        canvas.setFontSize(16);
        canvas.fillStyle = "#999999";
        canvas.setTextAlign('left');
        canvas.fillText('微信长按或扫一扫打开', 155 * rpx, 490 * rpx);
        canvas.draw(true, setTimeout(function () {
          _this.daochu()
        }, 1000));
      },
    
      //整个画布图片
      daochu: function () {
        let _this = this;
        let windowW = _this.data.windowW;
        let windowH = _this.data.windowH;
    
        //这里没有处理生产图片时间过长的操作，我还没试着做，产品决定直接就不用画布了，
        //毕竟太耗性能，等待时间也不可控，有懂得大佬能告知一下吗？
    
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: windowW,
          height: windowH,
          destWidth: windowW * 3,  //3倍像素  更清晰
          destHeight: windowH * 3,
          canvasId: 'canvas',
          success: function (res) {
            // console.log(res)
            wx.hideLoading();
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
              }
            })
            wx.previewImage({
              urls: [res.tempFilePath],
            })
            _this.setData({
              hideCanvas: false
            })
          },
          fail:function(err){
            wx.hideLoading();
            // console.log(err)
          }
        })
      },
    })

# #

## util.js ##

/**
     * canvas绘制圆角矩形
     * @param {Object} context - canvas组件的绘图上下文
     * @param {Number} x - 矩形的x坐标
     * @param {Number} y - 矩形的y坐标
     * @param {Number} w - 矩形的宽度
     * @param {Number} h - 矩形的高度
     * @param {Number} r - 矩形的圆角半径
     * @param {String} [c = 'transparent'] - 矩形的填充色
     */
    const roundRect = (context, x, y, w, h, r, c = 'transparent') => {
      if (w < 2 * r) {
        r = w / 2;
      }
      if (h < 2 * r) {
        r = h / 2;
      }
      context.beginPath();
      context.fillStyle = c;
    
      context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
      context.moveTo(x + r, y);
      context.lineTo(x + w - r, y);
      context.lineTo(x + w, y + r);
    
      context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
      context.lineTo(x + w, y + h - r);
      context.lineTo(x + w - r, y + h);
    
      context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
      context.lineTo(x + r, y + h);
      context.lineTo(x, y + h - r);
    
      context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
      context.lineTo(x, y + r);
      context.lineTo(x + r, y);
    
      context.fill();
      context.closePath();
    };
    
    
    /**
     * canvas绘制圆角图片
     * @param {Object} context - canvas组件的绘图上下文
     * @param {Number} r - 圆角半径
     * @param {String} path - 图片地址
     * @param {Number} sx - 源图像的矩形选择框的左上角 x 坐标
     * @param {Number} sy - 源图像的矩形选择框的左上角 y 坐标
     * @param {Number} sWidth - 源图像的矩形选择框的宽度
     * @param {Number} sHeight - 源图像的矩形选择框的高度
     * @param {Number} dx - 图像的左上角在目标 canvas 上 x 轴的位置
     * @param {Number} dy - 图像的左上角在目标 canvas 上 y 轴的位置
     * @param {Number} dWidth - 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
     * @param {Number} dHeight - 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
     * @param {String} c - 矩形的填充色
     */
    const roundImage = (context, r, path, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, c) => {
      context.save();
      roundRect(context, dx, dy, dWidth, dHeight, r, c);
      context.fill();
      context.clip();
      context.drawImage(path, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
      context.restore();
    };
    /**
    * 绘制圆形图片
    * @param {Object} context - canvas组件的绘图上下文
    * @param {String} path - 图片地址
    * @param {Number} x - 图片的x坐标
    * @param {Number} y - 图片的y坐标
    * @param {Number} r - 图片的半径
    */
    const circleImage = (context, path, x, y, r) => {
      let d = 2 * r;
      let cx = x + r;
      let cy = y + r;
    
      context.save();
      context.beginPath();
      context.arc(cx, cy, r, 0, 2 * Math.PI);
      context.fill();
      context.clip();
      context.drawImage(path, x, y, d, d);
      context.restore();
    };
    /**
     * canvas多行文本溢出
     * @param {Object} context - canvas组件的绘图上下文
     * @param {String} text - 文本内容
     * @param {Number} maxWidth - 文本最大宽度
     * @param {Number} maxRow - 文本最多显示行数
     * @param {Number} fontSize - 字体样式
     * @param {String} color - 文本颜色
     * @param {Number} lineHeight - 文本行高
     * @param {Number} x - 文本的x坐标
     * @param {Number} y - 文本的y坐标
     */
    const drawTextOverflow = (context, text, maxWidth, maxRow, fontSize, color, lineHeight, x, y) => {
      let arr = [];
      let temp = '';
      let row = [];
    
      text = text.replace(/[\r\n]/g, ''); // 去除回车换行符
      arr = text.split('');
      context.setFontSize(fontSize);  // 注意：一定要先设置字号，否则会出现文本变形
      context.fillStyle = color;
    
      if (context.measureText(text).width <= maxWidth) {
        row.push(text);
      } else {
        for (let i = 0; i < arr.length; i++) {
          // 超出最大行数且字符有剩余，添加...
          if (row.length == maxRow && i < arr.length - 1) {
            row[row.length - 1] += '...';
            break;
          }
    
          // 字符换行计算
          if (context.measureText(temp).width < maxWidth) {
            temp += arr[i];
            // 遍历到最后一位字符
            if (i === arr.length - 1) {
              row.push(temp);
            }
          } else {
            i--;  // 防止字符丢失
            row.push(temp);
            temp = '';
          }
        }
      }
      // 绘制文本
      for (let i = 0; i < row.length; i++) {
        context.fillText(row[i], x, y + i * lineHeight, maxWidth);
      }
      return row.length * lineHeight;  // 返回文本高度
    };

util转载于[https://www.jianshu.com/p/6c600e740194][https_www.jianshu.com_p_6c600e740194]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20211108/8981814608b6430a8170380d98fd4a69.png
[https_www.jianshu.com_p_6c600e740194]: https://www.jianshu.com/p/6c600e740194