评论

新的canvas 初次尝试 (1)---清除画布

清除画布 新canvas

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

运行效果

Game Over

最后一次编辑于  10-25  
点赞 1
收藏
评论

1 个评论

  • 雨声
    雨声
    11-02

    绘制的canvas模糊,楼主有解决方案没。

    11-02
    赞同 1
    回复 3
    • Damon
      Damon
      11-04
      加缩放没有?
      11-04
      回复
    • 雨声
      雨声
      11-04回复Damon
      用最简单的demo缩放试了倒是可以解决。但是我用f2的图表,目前是没成功。
      11-04
      回复
    • Z.P
      Z.P
      11-13
      我也发现绘制的很模糊,以前那种老的canvas绘制的还挺清晰的。
      11-13
      1
      回复