HTML5 canvas save()和restore()方法講解


我們嘗試用這個連續矩形的例子來描述 canvas 的狀態堆是如何工作的。
第一步是用默認設置畫一個大四方形,然后保存一下狀態。改變填充顏色畫第二個小一點的白色四方形,然后再保存一下狀態。再次改變填充顏色繪制更小一點的藍色四方形。然后我們調用了restore方法將設置回到前一個save狀態下的fillStyle="white",即在不設定顏色值的情況下再繪制最小的矩形時其添充色為白色。
一旦我們調用 restore,狀態堆中最后的狀態會彈出,並恢復所有設置。如果不是之前用 save 保存了狀態,那么我們就需要手動改變設置來回到前一個狀態,這個對於兩三個屬性的時候還是適用的,一旦多了,我們的代碼將會猛漲。 簡而言之restore方法就可以理解成將其對應的當前save狀態下的設置全部恢復為前一個狀態

代碼:
<script type="text/JavaScript">
window.onload=function(){
 var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
 ctx.fillRect(10,10,150,150);

 ctx.save();
 ctx.fillStyle="white";
 ctx.fillRect(30,30,110,110);

 ctx.save();
 ctx.fillStyle="blue";
 ctx.fillRect(50,50,70,70);
 ctx.restore();//回到上一個狀態,即 ctx.fillStyle="white";

 ctx.save();
 ctx.fillRect(70,70,30,30);//所以此處沒有設定fillStyle的時候顏色為white,注意哦!如果在白色矩形后面也restore一下剛此處的fillStyle就為黑色了
 ctx.restore();
}
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM