收藏
回答

急!!! canvas.clip() 无效的问题。。。

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 1.02.1806120

下面这段代码有问题吗?为什么不能裁剪出一个圆出来。。。

context.save();
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI);
context.closePath();
// context.fill();
context.clip();
context.fillStyle = "#900000";
context.fillRect(0, 0, 200, 200);
context.restore();
context.draw(false);

如果把注释去掉就可以?为什么 clip 之前需要先 fill 一次呢?


这个是完完整整复制的 clip 的示例中的代码,仅仅是把示例中的 drawImage 换成了 fillRect 就不行了。真的对你们的 API 很失望!!!


另外,真机是OK的~

回答关注问题邀请回答
收藏

7 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2018-08-09

    你好,建议更新一下开发者工具喔(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    2018-08-09
    赞同
    回复 9
    • 袁友才
      袁友才
      2018-08-10

      更新到 1.02.1808080 依然不行,麻烦官方多测试一下。比较底层的 API 有BUG我们无法修复的。而且之前很多提问得到的回答都是让我自己想法,WHAT?难道你们不应该验证下BUG是不是存在,难道不应该解释一下出现BUG的原因,如何导致的问题以及问题如何修复?难道官方回答问题的人都是客服部门的吗?就算是 github 上大项目提一个 issue,别人也会把事情说的清清楚楚 & 明明白白。


      我敢打赌,你根本没有跑过上面的有BUG的代码,甚至你可能看见问题是《开发者工具》第一反应就是让我们更新工具,好比网管让重启电脑一样。对官方这种不负责任务的做法我表示很不认同。


      小程序的源码不是开源,我们唯一能解决问题的途径只有这里。但是在这里却被这样敷衍了事,你认为这对建立开发社区有利吗? 你们自己想发明轮子,可是你们知道用轮子的是我们吗?轮子漏气了,我们缺找不到补胎的地方,想不到补胎的办法。我们就只能拖着一个蔫了的轮子在马路上跑了,这样的车子能跑多远谁也不知道。试问小程序能跑多远呢?


      2018-08-10
      3
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-08-10回复袁友才

      我在最新的开发者工具上(v1.02.1808080)是能裁出一个圆的。请提供一下你那边出现问题的截图?

      2018-08-10
      回复
    • 袁友才
      袁友才
      2018-08-10回复小程序技术专员-june

      好的,劳烦大大帮忙看下。。。





      2018-08-10
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-08-10回复袁友才

      你这里是否连续调用了这个draw方法?能否给个代码片段看看你的调用方式和时机?

      2018-08-10
      回复
    • 袁友才
      袁友才
      2018-08-11回复小程序技术专员-june

      wechatide://minicode/9RgVEAmq7l1q






      如果你是用代码片段的话,用 setInterval 包一下用来模拟计时器更新。

      2018-08-11
      回复
    查看更多(4)
  • 皮仔
    皮仔
    2018-11-01

    刚踩完坑,摸到这里来了,还是留下点什么吧。 情况是创建了画布之后先fillRect()将画布背景设置为白色,然后后面有一个截取圆形微信头像的操作, 但是只要前面用了fill或者fillRect修改底色,那么clip就会失效,注释掉flll / fillRect则正常。

    2018-11-01
    赞同 1
    回复
  • 沁园秋.当归
    沁园秋.当归
    2018-10-24

    遇到同样的,问题,真机是可以的,开发者工具弱爆了

    2018-10-24
    赞同
    回复
  • Afan
    Afan
    2018-08-15

    https://github.com/AfanSama/esay-canvas

    楼主看看这个

    2018-08-15
    赞同
    回复
  • θ–θ
    θ–θ
    2018-08-10

    开发工具上遇到过这个问题,但是点击预览发现在真机上没问题,我就直接无视了

    2018-08-10
    赞同
    回复 1
    • 野孩子
      野孩子
      2019-05-05

      为什么我是在开发工具上是可以的,在手机上看就不行呢

      2019-05-05
      回复
  • C.Barnaby
    C.Barnaby
    2018-08-10

    同遇到这个问题,小程序开发最新版本,clip失效

    2018-08-10
    赞同
    回复 2
    • C.Barnaby
      C.Barnaby
      2018-08-10

      按照答主的方法画出来了,但是官网的示例不行

      2018-08-10
      回复
    • 野孩子
      野孩子
      2019-05-05回复C.Barnaby

      你这个问题解决了吗,我的是在工具上看是可以的,在手机上看是不行的

      2019-05-05
      回复
  • 袁友才
    袁友才
    2018-08-09

    目测是 clip 之前没有 closePath,但是我调了 closePath 啊,,,难道调了一个假的 closePath?

    2018-08-09
    赞同
    回复 1
    • 袁友才
      袁友才
      2018-08-09

      这个是期望的效果:https://jsbin.com/kehotuqodi/edit?html,output

      2018-08-09
      回复
登录 后发表内容