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

小程序canvas clip的问题~

框架类型 问题类型 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();
}


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

3 个回答

请 登录 后发表内容
相关问题
相关文档