如图所示, save / restore 操作, 未生效. 第二段代码 stroke 的路径跟第一段的是连起来的.
第一段代码末尾, draw 操作不去掉的话. 则能画出一个实心黑圈, 和一个空心红圈(不连接). 这与文档中说明的不一致啊. 两个问题请说明一下:
1. restore 操作应该把路径也返回之前保存的状态, 现在看并没有只有颜色设置生效了(另一个demo上验证的)
2. draw 操作当 reserve 为 true 的时候, 保留之前绘制的图形和上下文. 但是实际上路径和颜色设置都没有保留.(见下图)
//先进行坐标转换
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();
【说明】
按业务需求，先以”红色“绘制一个矩形，然后，再以”蓝色“再在偏移位置绘制一个矩形。
但是，实际的效果是：绘制出来的两个矩形，都是”蓝色“的。
如有哪位大侠知道原因，希望能告知小弟，不胜感激^_^~~
请具体描述问题出现的流程，并提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
然后画空心圈, 但是 restore 并没有生效, 所以空心圈的 path, 还连上了上面那个实心圈的边框.