收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 drawImage 客户端 6.7.4 2.0.9

- 需求的场景描述(希望解决的问题)

画布上绘制矩形后,在该矩形上绘制圆形图片失败,原因是矩形和绘制的圆形重叠导致


// 画入海报背景

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))

})


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

3 个回答

  • 社区技术运营专员-白柿子
    社区技术运营专员-白柿子
    2018-12-11

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-12-11
    赞同
    回复 1
  • jiabin
    jiabin
    2018-12-13

    等我回忆一下,当时遇到过这个问题...其实就是路径重合了,可以闭合路径或者在画布可视范围外面再画一个矩形就解决了
    ------------------------
    找了一点以前画圆的代码(现在已经换成别的了),在这之前是画过矩形、图片之类的操作的,反正大概是和路径有关系,时间久远具体的忘了...
               ctx.save();
                ctx.beginPath();
                // 结束之前的路径
                ctx.setStrokeStyle('rgba(0,0,0,0)');
                ctx.stroke();
                // 画圆 裁剪
                ctx.arc(imgW / 2 + imgX, imgH / 2 + imgY, imgW / 2, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(res.tempFilePath, imgX, imgY, imgW, imgH);
                ctx.restore();

    2018-12-13
    赞同
    回复
  • Eunice@萧
    Eunice@萧
    2018-12-13

    目前发现的问题是  头像  基本上安卓可以画圆形图片,但是苹果不行

    2018-12-13
    赞同
    回复