个人中心 | 微信开放社区

canvas 矩形上绘制圆形图片开发者工具正常，真机失败

- 需求的场景描述（希望解决的问题）画布上绘制矩形后，在该矩形上绘制圆形图片失败，原因是矩形和绘制的圆形重叠导致 // 画入海报背景 ctx.drawImage(海报背景图, 0, 0, that.myCanvasWidth, that.myCanvasHeight); ctx.draw() // 白色矩形 ctx.rect(12, that.myCanvasHeight - 130, that.myCanvasWidth - 24, 80) ctx.setFillStyle('white') // 切割成圆角矩形 that.drawRoundedRect(ctx, 12, that.myCanvasHeight - 130, that.myCanvasWidth - 24, 80, 4) ctx.clip() ctx.draw(true) // 圆形头像画入 ctx.save(); // 先保存状态已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 ctx.arc(45, that.myCanvasHeight - 90, 25, 0, Math.PI * 2) ctx.clip()//画了圆再剪切原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(头像图片, 20, that.myCanvasHeight - 115, 50, 50) // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文恢复之前保存的绘图上下午即状态可以继续绘制 ctx.draw(true) ctx.draw(true, setTimeout(function() { wx.canvasToTempFilePath({ x: 0, y: 0, destWidth: 375 * 3, destHeight: 550 * 3, canvasId: 'canvas', success: function(res) { that.imageTempPath = res.tempFilePath; //这就是生成的文件临时路径 }, fail: function(res) { console.log(res,'fail'); } }) that.$apply() }, 50)) })

GitHub账号

选择需要上架的开放服务

案例类型