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