收藏
回答

画原圆形头像

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.01.1805150

直接上图


代码:

shareContent.setFillStyle("rgb(255, 253, 208)");

shareContent.fill();

shareContent.fillRect(100, 100, 200, 60);


//画分享者头像

const shareAvatarRadius = 40;

const shareAvatarX = 60;

const shareAvatarY = 90;

drawCircleImg(shareContent, content.images[2], shareAvatarX, shareAvatarY, shareAvatarRadius);


var drawCircleImg = function(ctx, img, x, y, r) {

ctx.save();

var d = 2 * r;

var cx = x + r;

var cy = y + r;

ctx.arc(cx, cy, r, 0, 2 * Math.PI);

ctx.clip();

ctx.drawImage(img, x, y, d, d);

ctx.restore();

}


这个圆形头像会突出了,不知道出了什么问题


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

3 个回答

  • 邱一欢
    邱一欢
    2018-12-12

    裁剪路径没有生成完整, 你调用下fill() 填充以一个透明色, 应该可以把路径生成完整。这个和h5还是有差距的。

    var drawCircleImg = function(ctx, img, x, y, r) {

      ctx.save();

      ctx.fillStyle ="rgba(255, 255, 255,255)";

      const d = 2 * r;

      const cx = x + r;

      const cy = y + r;

      ctx.arc(cx, cy, r, 0, 2 * Math.PI);

      ctx.fill();

      ctx.clip();

      ctx.drawImage(img, x, y, d, d);

      ctx.restore();

    }


    2018-12-12
    有用
    回复 2
    • 如雨随行
      如雨随行
      2018-12-14

      没有用啊


      2018-12-14
      回复
    • 邱一欢
      邱一欢
      2018-12-14


      我这边调试是可以。

      2018-12-14
      回复
  • 是小白啊
    是小白啊
    2018-12-11

    按照教程提供下代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-12-11
    有用
    回复 2
  • 杨李云
    杨李云
    2018-12-11


        @官方 快来,这个目测要诱导分享了,快把他扼杀在摇篮之中

    2018-12-11
    有用
    回复 1
    • 痛快科技
      痛快科技
      2018-12-11

      被你看出来了

      2018-12-11
      回复
登录 后发表内容