Home > Developer > Web Develop
Analytical:
We can save the state of the current canvas before we do the translation transformation, but the canvas gives us support for layers (layers) that are managed by the stack structure.
When we call the Save () method, the state of the current canvas is saved and then added to the canvas stack as a layer, and this layer is not a concrete class, it's a conceptual thing!
And when we call the restore () method, the state of the previous canvas is restored, and the canvas stack pops up the layer at the top of the stack, and the subsequent layer comes to the top of the stack. This time the canvas replies to the top of the stack when the canvas state is saved!
Simply put : Save () pushes the stack into a layer,restore () pop-up stack at the top of a layer, which represents the state of the canvas! This means that you can save () multiple times, or restore () multiple times, but the number of calls to restore cannot be greater than save or an error will be thrown! This is the majority of the online statement, but the actual test did not appear such a problem, even if I restore more times than save, there is no Error ~ Visual is the system changed, and so on to everyone to see ~ to come, write an example to verify the role of Save and restore!
1<! DOCTYPE html>234<title>insert you title</title>5<meta name= ' description ' content= ' This is my page ' >6<meta name= ' keywords ' content= ' keyword1,keyword2,keyword3 ' >7<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">8<link rel= ' stylesheet ' type= ' text/css ' href= './css/index.css '/>9<script type= ' text/javascript ' src= './js/jquery-1.12.1.min.js ' ></script>Ten<style type= ' text/css ' > One Html,body { Amargin:0; padding:0; - } - the Body { -Background: #000; - } - + #can { -Display:block; MARGIN:25PX Auto; Background: #FFF; border-radius:2px; + } A</style> at<script type= ' Text/javascript ' > -$(function(){ - varCanvas = $ (' #can '). Get (0). GetContext (' 2d ' ); -Canvas.fillstyle = ' #F00 '; -Canvas.save ();//Save the state of the current canvas - inCanvas.fillstyle = ' #0F0 '; -Canvas.translate (100, 100 ); toCanvas.fillrect (50, 50, 50, 50 ); + -Canvas.restore ();//restores the state of a saved canvas theCanvas.fillrect (50, 50, 50, 50 ); * $ } );Panax Notoginseng</script> - the<body> +<canvas id= ' can ' width= ' height= ' > Your browser version is too low please upgrade your browser version for a better user experience ...</canvas> A</body> the
[HTML canvas Save restore] Canvas drawing Save Restore Property Instance Demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
