评论

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

点赞 1
收藏
评论

4 个评论

  • 雨声
    雨声
    2019-11-02

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

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

    大佬 最后canvas的绘图和image的图像要怎么合在一起啊 撤销又是怎么实现的呢?

    03-25
    赞同
    回复 1
    • 
      03-29
      把所有的坐标和操作都记录下来就可以实现撤销了
      03-29
      回复
  • 
    03-02
    大佬,帮大忙了,我为了实现撤销绘图和前进功能,试了好多种方式,发现canvasToTempFilePath和canvasGetImageData 2个接口都不好用,不是不兼容就是性能低就是绘图怪异,就干脆自己实现了,把每一部绘图的记录保存起来,然后来实现,发现效果不错,就是不知道能支撑多少数据的撤销与前进操作
    
    03-02
    赞同
    回复 1
    • AILUG
      AILUG
      03-25
      撤销是怎么实现的  - -
      03-25
      回复
  • 
    02-25

    同样遇到ctx.clearRect()无效的问题,请问楼主解决了吗?在canvas2d上

    02-25
    赞同
    回复 7
    • Damon
      Damon
      03-03
      解决了  查看round three
      03-03
      回复
    • 
      03-03回复Damon
      嗯,之前我没看仔细,以为这个api用不了,有折腾了几天,昨天又看到了,就解决了
      03-03
      回复
    • 少年锦时
      少年锦时
      03-11
      canvasToTempFilePath 新版本canvas无效情况下,你是如何把绘制的图像存储到服务器的
      03-11
      回复
    • 
      03-11回复少年锦时
      有效,在真机上才有效,你可以试试。我的小米8可以,不知道别的可以不可以,拿canvasToTempFilePath返回的地址,直接放到微信上传接口的path里面就行了
      03-11
      回复
    • 少年锦时
      少年锦时
      03-11回复
      旧坑没填又来新的,我也是服了
      03-11
      回复
    查看更多(2)
登录 后发表内容