新的canvas(特指基础库2.9.0之后)绘图性能很强。流畅度和HTML差别不大。运行效果令人欢欣鼓舞。 [代码]<canvas type="2d" id="canvas" /> [代码] 在本人项目中正好有图片编辑的功能要使用canvas。 那么我们先梳理一下需求 编辑图片在图片上进行描边操作 描边不满意，清除掉重新描边 尽量减少页面绘制时间。提高用户体验 针对以上需求，经过多轮测试，我们制定了以下计划 在用户选择完图片后，使用image标签显示图片，减少drawImaged的次数 在image标签上层覆盖一个透明的canvas，然后在canvas上进行描边操作 在2.9.0但是随之而来的就是原有的canvas接口部分不能使用。比如canvas.draw()在新的canvas不能使用。想通过canvas.draw()来清除画布的方式不在适用于新的canvas。 但是好在官方发布的接口公测公告中告诉我们 [代码]为了提高 Canvas 组件的性能，我们计划在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口。该接口符合 HTML Canvas 2D 的标准 [代码] 好吧 HTML Canvas 2D标准。那么我们照着这个标准来进行画布的清除吧。 Round One 我们都知道 ctx.clearRect(0,0,canvas.width,canvas.height),可以清除画布区域内所有内容。但是重新开始绘制的时候，原来被清除的内容又神奇的回到了画布上 [代码]ctx.clearRect() [代码] 运行效果 浏览器 — fail 开发工具 — fail 基础库2.8.3 — fail 基础库2.9.0 — fail Round Two 改变画布状态，强制画布初始化。 除了2.9.0 其他版本运行完美。作为小程序，我们要考虑大多数用户的运行环境，所以该方案也行不通 [代码]canvas.height = canvas.height [代码] 运行效果 浏览器 — pass 开发工具 — pass 基础库2.8.3 — pass 基础库2.9.0 — fail Round Three 改变绘制的颜色叠加方式 [代码]ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fill(); ctx.globalCompositeOperation = 'source-over'; [代码] 运行效果 浏览器 — pass 开发工具 — pass 基础库2.8.3 — pass 基础库2.9.0 — pass 代码 如下 https://developers.weixin.qq.com/s/ZZOQ2nmu71cM Game Over