新的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