公告列表
公告列表
收藏
回答

为什么我canvas圆角开发工具可以，真机无效？

//绘制商品详情分享
    drawP: function (bgimg) {
      var than = this;
      canvasOb = wx.createCanvasContext("canvasId", this);
      than.roundRect(canvasOb, 0, 0, than.data.canvasInfo.w, than.data.canvasInfo.h, 10);
      canvasOb.draw();
      canvasOb.drawImage(bgimg, 0, 0, than.data.canvasInfo.w, than.data.canvasInfo.h);
       
      var proImg = than.data.shareData.productInfo.images[0]; //产品图片
      var proImgWH = appinit.getQuery(proImg, 'image');
      if (proImgWH != null) {
        var wh_arr = proImgWH.split(',');
        var arr_w = Number(wh_arr[0]);
        var arr_h = Number(wh_arr[1]);
        if (arr_w != arr_h) {
          var strs = '';
          if (arr_w > arr_h) {
            strs = '&x-oss-process=image/crop,w_' + arr_h + ',h_' + arr_h + ',g_center';
          } else {
            strs = '&x-oss-process=image/crop,w_' + arr_w + ',h_' + arr_w + ',g_center';
          }
          proImg = proImg + '' + strs;
        }
      }
      //绘制商品图片
      wx.getImageInfo({
        src: proImg,
        success(res) {
          var imgw = than.data.canvasInfo.w;
          var imgh = imgw;
          canvasOb.drawImage(res.path, 0, 0, imgw, imgw);
          canvasOb.save();
 
          //商品标题
          var nameX = than.data.canvasInfo.w * 0.05;
          var nameY = than.data.canvasInfo.h * 0.72;
          let details = {
            x: nameX,
            y: nameY,
            width: than.data.canvasInfo.w - (nameX * 2),
            height: 20,
            line: 2,
            color: '#1A1A1A',
            size: 11,
            align: 'left',
            text: than.data.shareData.productInfo.title,
            bold: true
          }
          than.textWrap(details);
          //广告语
          var ggy = than.data.shareType == "productdetail" ? "为您推荐一款精选好货~" : "为您送来一张免费抽奖券~";
          let bannerInfo = {
            x: than.data.canvasInfo.w * 0.21,
            y: than.data.canvasInfo.h * 0.961,
            width: than.data.canvasInfo.w * 0.5,
            height: 20,
            line: 1,
            color: '#939393',
            size: 10,
            align: 'left',
            text: ggy,
            bold: false
          }
          than.textWrap(bannerInfo);
          let text1 = {
            x: than.data.canvasInfo.w * 0.685,
            y: than.data.canvasInfo.h * 0.963,
            width: than.data.canvasInfo.w * 0.4,
            height: 20,
            line: 1,
            color: '#1A1A1A',
            size: 10,
            align: 'left',
            text: '长按识别二维码',
            bold: true,
            boldW:0.2
          }
          than.textWrap(text1);
          //绘制二维码
          wx.getImageInfo({
            src: than.data.qrCodeImg,
            success(res) {
              var ewmX = than.data.canvasInfo.w * 0.7;
              var ewmY = than.data.canvasInfo.h * 0.75;
              var ewmW = than.data.canvasInfo.w * 0.26;
              canvasOb.drawImage(res.path, ewmX, ewmY, ewmW, ewmW);
              canvasOb.save();
              //绘制用户信息
              //昵称绘制
              let nicknameInfo = {
                x: than.data.canvasInfo.w * 0.21,
                y: than.data.canvasInfo.h * 0.921,
                width: than.data.canvasInfo.w * 0.5,
                height: 20,
                line: 1,
                color: '#1A1A1A',
                size: 11,
                align: 'left',
                text: appinit.appData.userInfo.nickname,
                bold: true
              }
              than.textWrap(nicknameInfo);
 
              //绘制头像
              wx.getImageInfo({
                src: appinit.appData.userInfo.headimg,
                success(res) {
                  var headImgw = than.data.canvasInfo.w * 0.13;
                  var headImgh = headImgw;
                  var haedx = than.data.canvasInfo.w * 0.05;
                  var haedy = than.data.canvasInfo.h * 0.89;
                  // 控制头像为圆形
                  canvasOb.setStrokeStyle('rgba(255,255,255,1)') //设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框
                  var touxB = headImgw / 2;/*头像半径*/
                  canvasOb.arc(haedx + touxB, haedy + touxB, touxB, 0, 2 * Math.PI)
                  canvasOb.stroke()
                  //画完之后执行clip()方法，否则不会出现圆形效果
                  canvasOb.clip();
                  canvasOb.drawImage(res.path, haedx, haedy, headImgw, headImgh);
                  canvasOb.restore();
                  canvasOb.save();
                  canvasOb.draw();
                  than.setData({
                    canvasShow:true
                  })
                }
              })
            }
          })
           
        }
      })
    },
roundRect(ctx, x, y, w, h, r) {
      if (w < 2 * r) { r = w / 2; }
      if (h < 2 * r) { r = h / 2; }
      canvasOb.beginPath();
      ctx.setFillStyle('#ffffff');
      canvasOb.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
      canvasOb.moveTo(x + r, y);
      canvasOb.lineTo(x + w - r, y);
      canvasOb.lineTo(x + w, y + r);
 
      canvasOb.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
      canvasOb.lineTo(x + w, y + h - r);
      canvasOb.lineTo(x + w - r, y + h);
 
      canvasOb.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
      canvasOb.lineTo(x + r, y + h);
      canvasOb.lineTo(x, y + h - r);
 
      canvasOb.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
      canvasOb.lineTo(x, y + r);
      canvasOb.lineTo(x + r, y);
 
      ctx.fill();
      ctx.closePath();
      ctx.clip();
    },



回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关问题
相关文档
问题标签
开发工具绘制商品canvas分享