收藏
回答

小程序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  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

5 个回答