收藏
回答

小程序canvas clip的问题~

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 iOS 6.6.7 2.1.0

需求:在画布上绘制多个正六边形区域,使用clip(),然后draw一张图片到画布在六边形区域内显示

问题:android真机和模拟器显示正常,ios下只有第一张正确显示为六边形形状,其余的都显示为长方形。

IOS版本为最新的11.4版本。



for (var i = 0; i < self.data.drawImag.length; i++) {
  var box = self.data.drawImag[i];
  max.push(box.y + box.h)
  var ratio = windowW / 750;
  var centerx = box.x * ratio + (92 * ratio / 2);
  var centery = box.y * ratio + (102 * ratio / 2);
  var r = centery - box.y * ratio;
  var h = r * 1.732;
  ctx.save();
  ctx.beginPath();
  ctx.setStrokeStyle('#ffffff');         
  ctx.moveTo(centerx, (centery - r) + addHeight); //路径的起点
  ctx.lineTo(centerx + (Math.sqrt(3) / 2 * r), centery - (r / 2) + addHeight); //路径的终点
  ctx.lineTo(centerx + (Math.sqrt(3) / 2 * r), centery + (r / 2) + addHeight); //路径的终点
  ctx.lineTo(centerx, centery + r + addHeight); //路径的终点
  ctx.lineTo(centerx - (Math.sqrt(3) / 2 * r), centery + (r / 2) + addHeight); //路径的终点
  ctx.lineTo(centerx - (Math.sqrt(3) / 2 * r), centery - (r / 2) + addHeight); //路径的终点
  ctx.lineTo(centerx, (centery - r) + addHeight);
  ctx.closePath();
  ctx.stroke();
  ctx.clip();         
  ctx.drawImage(box['img'], centerx - 0.86 * r, centery - r + addHeight, 1.732 * r, 2 * r);
  ctx.restore();
}


最后一次编辑于  2018-06-20  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 黄思程
    黄思程
    2018-06-25

    你好,该问题已修复,请更新到6.7.0尝试一下

    2018-06-25
    赞同
    回复 2
    • yc_cy
      yc_cy
      2018-07-17

      你好,不是说6.7.0问题修复了吗?可我的微信是6.7.1还是出现类似问题  我用canvas画两个圆,一个clip后放用户头像,然后另一个clip后放小程序码。模拟器上显示没问题,ios 6.7.1上 只有一个圆,用户头像的是方形的。求解

      2018-07-17
      回复
    • 黄思程
      黄思程
      2018-07-29回复yc_cy

      提供代码片段看看

      2018-07-29
      回复
  • 娇华
    娇华
    2018-06-20

    你好,这是一个已知问题,我们会尽快进行修复。另外建议后续经过搜索后再提问,以提高问题解答的效率。

    最新版ios版本微信6.6.7 小程序canvas不支持clip方法
    https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000aac0ce58be86f3cd6d43585b400

    2018-06-20
    赞同
    回复
  • 小可🌳
    小可🌳
    2018-06-27

    @ 黄思程 能不能关注下我提交的bug,好多天了。

    2018-06-27
    赞同
    回复