收藏
评论

小程序canvas,第二次draw()自动restore()?



有个需求,在canvas里局部区域画图,切画出来的图,得随移动事件,移动。像下图,只在咖啡杯内显示图。

尝试代码大概如下:


var ctx = wx.createCanvasContext('designCanvas');
console.log(ctx);
var toPx = app.globalData.toPxUnit;
// ctx.font = "normal bold 16px -apple-system-font,Helvetica Neue,sans-serif";
ctx.arc(292 * toPx, 292 * toPx, 292 * toPx, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(this.designImg, 0, 0, 586 * toPx, 586 * toPx);
ctx.draw();
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('yellow')
ctx.fill()
ctx.draw();


一开始就用clip(),切出了个圆行区域,调用了2次draw()。

注意:没使用restore().

结果:

开发工具模拟器,如下图


2.真机如下图


意思就是,第二次draw()时,没用restore(),它也自动跟你restore()了,我想切下来只显示的局部区域,没一直保存。


问题得去解决,本意就是如上图只显示咖啡杯内区域。

1> 首先尝试了,移动时,先clip()下再画,结果爆卡,不正常。

2>再尝试了cover-view,透明图片盖住,结果canvas里移动事件没触发,才注意:

3>在canvas里放canvas,子canvas画透明图,也不影响事件冒泡,初步解决问题。如下图



注意如上: 子canvas 样式 display:block !important, 否则不显示。


备注,使用图片覆盖发现的注意点:

  1. cover-view,

  2. 如果使用cover-image,注意

最后一次编辑于  2018-06-17  (未经腾讯允许,不得转载)
复制链接收藏赞 0

1 个评论

  • 张帅
    张帅
    2018-06-28
    你好,canvas中套canvas,然后导出图片,怎么把两个canvas导成一张图片保存?
    2018-06-28
    赞同
    回复