收藏
回答

canvas 绘制, 为什么 save/restore 操作不生效?

如图所示, save / restore 操作, 未生效. 第二段代码 stroke 的路径跟第一段的是连起来的.

第一段代码末尾, draw 操作不去掉的话. 则能画出一个实心黑圈, 和一个空心红圈(不连接). 这与文档中说明的不一致啊. 两个问题请说明一下:

1. restore 操作应该把路径也返回之前保存的状态, 现在看并没有只有颜色设置生效了(另一个demo上验证的)

2. draw 操作当 reserve 为 true 的时候, 保留之前绘制的图形和上下文. 但是实际上路径和颜色设置都没有保留.(见下图)

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

2 个回答

  • 江南懒人
    江南懒人
    2021-05-20

    //先进行坐标转换

        ctx.save();

        ctx.fillStyle =  'RGB(255,0,0)' ;

        ctx.rect( self.x , self.y , self.w , self.h );

        ctx.fill();

        ctx.stroke();

        //坐标恢复

        ctx.restore();


        //先进行坐标转换

        ctx.save();

        ctx.fillStyle =  'RGB(0,0,255)' ;

        ctx.rect( self.x+20 , self.y+20 , self.w , self.h );

        ctx.fill();

        ctx.stroke();

        //坐标恢复

        ctx.restore();

    【说明】

    按业务需求,先以”红色“绘制一个矩形,然后,再以”蓝色“再在偏移位置绘制一个矩形。

    但是,实际的效果是:绘制出来的两个矩形,都是”蓝色“的。

    如有哪位大侠知道原因,希望能告知小弟,不胜感激^_^~~

    2021-05-20
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2020-09-04

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-09-04
    有用
    回复 6
    查看更多(1)
登录 后发表内容
问题标签