canvas save()和canvas restore()状态的保存和恢复使用方法及实例 你的名字 2021-09-17 03:36 265阅读 0赞 新的一天又来啦,最近这些天一直是阴雨连绵的,也是醉了,不过还好今天终于可以看到灿烂的阳光了,现在这种温度,最喜欢站在太阳下晒着太阳,身上暖暖的,心情也会好很好,o(* ̄︶ ̄*)o ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70][] 好啦,不扯这些闲篇了,进入正题吧,今天分享下 canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例 canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态 注:两种方法必须搭配使用,否则没有效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="800" height="600"></canvas> <script> var canvas=document.querySelector('canvas'); var ctx=canvas.getContext('2d'); ctx.save();//状态的保存 ctx.setLineDash([5]); ctx.lineWidth=4; ctx.strokeStyle='red'; ctx.strokeRect(50,50,300,300); ctx.restore();//状态的恢复 ctx.arc(400,300,150,0,2*Math.PI); ctx.stroke(); </script> </body> </html> 代码效果如下: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 1][] 大家可以看到,在最上面的时候在canvas中画了一个矩形,而且是虚线矩形,红色,线宽为5,后来又画了一个圆形 注意并没有开辟新路径,这个圆保持了canvas默认的状态,黑色实线1px线宽,这是为什么呢? 就是因为在定义了ctx以后,我们用了save()保存了初始的状态,在我们划圆的时候用restore恢复了初始的状态,所以为黑色实线。 再看下面这个例子上面的代码简单做了改变,但是效果却不一样了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas width="800" height="500"></canvas> <script> var canvas=document.querySelector('canvas'); var ctx=canvas.getContext('2d'); ctx.setLineDash([5]); ctx.lineWidth=4; ctx.save();//状态的保存,-----改变了保存的位置 ctx.strokeStyle='red'; ctx.strokeRect(50,50,300,300); ctx.restore();//状态的恢复 ctx.arc(400,300,150,0,2*Math.PI); ctx.stroke(); </script> </body> </html> 代码效果如下: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 2][] 这次发生了什么变化? 圆圈变成了虚线,并且线宽也是4了,但是颜色没有变,为啥子嘞?就是因为使用canvas中save()方法时,先执行的虚线和线宽的代码,也就是在保存的时候已经把虚线和线宽保存了,所以后来在执行恢复的时候就会恢复上 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70]: /images/20210813/98835e5a4e984fd9a1c232803bd8cc60.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 1]: /images/20210813/bbf0f8e269134ae0ad6b0693f22f3692.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70 2]: /images/20210813/ca58b8183617453d9d8702113a017b91.png
还没有评论,来说两句吧...