小程序canvas clip的问题~
需求：在画布上绘制多个正六边形区域，使用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();[代码][代码]}[代码]
