save() restore()
你可能会觉得“Canvas存储恢复”这词儿有点深奥？其实就是在作画过程中，提前把画面保存到电脑里头，需要的时候再翻出来看。比如说打游戏的时候，暂停后随时可以回放，多方便！
Canvas状态是什么？
Canvas状态就好比是你画板上涂抹的那一堆东西，比如选什么颜色，用多大的力气画线，有没有歪曲之类的。总之这上面全是你创作时留下的痕迹，这些都可以算是Canvas状态。而且这个状态还挺重要的喔，只要你稍微动动手指调整下，画出的画面可能就大大不同！
canvas，它的状态是靠堆栈存起来的。就像拍照那样，你用了save这个方法，就把现在的样子保存下来放到堆栈去。不管往后咋样变化，你都能找到那张最开始的“老照片”！
save和restore怎么用？
Canvas里头有俩好用的快捷键——save和restore！它们就是专门用来保存在画布上搞定了的事儿和恢复之前的操作滴。就跟玩儿游戏存档&读档似的方便。每次画新作之前，别急着动笔，先save一把，这样就算画歪了或者想换效果也能回退。
这操作真的很简单！你在那边随便点几下，啥复杂的参数也不用操心。比如说，你随手画了一个大正方形，觉得不错的话就赶紧保存！以后想换成小正方形？还是想回归大正方形？那简单，你只需要恢复一下刚才的设置就好了，之前所有的调整都能回来！
状态堆栈的工作原理
Canvas的状态就是这么保存的：只要save一下，堆里的状态就会往上移；恢复的时候，原来在顶部的那部分状态又会重新出现所以之前设过的东西都会回来。
你知道吗，比如你画了很多图，保存下来。想回顾的话直接找到这个图的存档不就行了么？这样无论面对什么复杂图案，都能快速回到最初状态，超方便的技巧！
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings
ctx.save(); // Save the default state
ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
ctx.save(); // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings
ctx.restore(); // Restore previous state
ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings
ctx.restore(); // Restore original state
ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings
}
restore的实际应用
translate(x, y) translate
这个叫“还原”的功能真的好厉害，我用了觉得很爽，尤其是画很多图形之后，自己调的话会累死人的！
用restore功能就安心！画完图随手按个恢复就能立刻变回原样~这样下来，代码整洁，绘图也更随心所欲。
save和restore的组合使用
剪贴板就像个备忘录，帮你随意存档。下次开始画新图或者修改设置前，记得保存原版，如有需要再恢复回来。这样的话，哪改了，改成啥样儿，就一目了然！
比如说，你画了张很麻烦的图，然后改动了好多次设定，也没能记住以前的样子，最后画出来的东西乱七八糟。但是如果有保留历史记录和恢复功能，每次改变都会有提示，画出的作品也能够接近你想要的样子！
translate的作用
你可别忘了translate这个方法其实就是给Canvas里的图形搬家用的。想把图形放在随意位置？调坐标太麻烦，交个translate就能轻松解决！
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,300,300);
for (var i=0;i<3;i++) {
for (var j=0;j20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
想在画布左上角画图？忘了坐标，直接用translate拖动图案过去就行！这么做简单又方便，画画更酷炫！
rotate(angle)
scale的魔力
“Scale”这玩意儿你懂吗？直接用来缩放图形很方便，比如如果小星星不够亮，可以试试调大一点，瞬间变身超大星星！
框形放大真的超赞！只要设置一个缩放比即可。譬如想让图像变大两倍，只需输个scale(2,2)。这样一来，每一角都能放大两个像素，整图立马就大了起来。
变形矩阵的秘密
晕乎了吗？别怕，变形矩阵就是Canvas里的小黑板，记录所有变形动作。用translate（移动）、scale（变大变小）或者rotate（转圈）使点劲儿，这个哥哥就要重整队伍！
改变这个矩阵就能画出各种好玩儿的图案了！像左边稍微斜一点儿的话，只需要轻轻调整一下矩阵就好！这样子做出来的图不光好看还很有个性！
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // drawindividual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}
实践中的Canvas状态管理
scale(x, y)
绘画时候，要把Canvas的状态保护好。记住找准存取画布的时机，别让瞎搞破坏画风！
就比如你画个大作，过程中改来改去，不小心搞定一地鸡毛。但如果你备份了再恢复改动的话，那一切都井然有序，最后出炉的作品肯定也更可爱。
小结：让Canvas成为你的画布
Canvas的存档&恢复功能就是让你随心所欲地涂鸦！画累了就停下来歇歇，回头看看之前的成果感觉更好玩儿了
Canvas保存和恢复的事儿，是啥意思你知道吗？是不是觉得有时候Canvas也能让我们随心涂抹？那就赶紧动手试试看，Canvas就是我们大展身手的地方，可以画出各种奇妙的想法！
评论0