點擊右上角的關注，不定期前端干貨分享！！

歡迎來到我的前端圖形學系列文章：

前端圖形學基礎(一)——Canvas基礎入門

前端圖形學基礎(二)——Canvas基礎

前端圖形學基礎(三)——Canvas繪制圖片

前端圖形學基礎(四)——Canvas繪制曲線

我們已知曉，canvas畫布，畫筆的概念。如果說，我們只是在畫布上繪制基礎的圖形，那是否感覺canvas能力有限呢？

其實不然，現在世面上的h5游戲基本都是基于canvas來實現的，也就是說，我們不僅要在畫布上繪制圖形，還要讓圖形對象能在畫布上做矩陣變換、物理碰撞檢測等，這時候我不得不提到canvas又一個非常重要的API。Canvas的狀態的保存和恢復。

狀態的保存和恢復

//保存畫布(canvas)的所有狀態

context.save();

恢復畫布(canvas)的所有狀態

context.restore();

這兩個方法一般配合一起使用。

什么意思？比如我們在調用了context.translate(x,y)方法后，會將canvas原點移動到x,y的位置(默認原點為0，0)，那么在context.translate之后的繪制圖形都會以(x , y)為原點開始繪制的。廢話少說，直接上示例：

context.fillStyle = '#f00';context.translate(100,100);context.fillRect(0,0,100,100);context.strokeRect(100,100,100,100);

這個 demo 我先將原點移動到(100，100)的位置，然后依次繪制了兩個矩形，效果如下：

可以看到，兩個矩形都會受到translate的影響，這往往在我們實際的開發過程中不是我們想要的，接下來我們通過canvas的狀態管理來解決這個問題。

context.save();context.translate(100,100);cntext.fillRect(0,0,100,100);cotext.restore();conext.strokeRect( 50,50,100,100);

效果如下：

這里面我們把translate方法和繪制第一個矩形放在了save和restore方法之間。這樣可以使我們translate效果只能作用在save和restore之間。我們從圖中可以看到，黑色的矩形框并未受到translate原點平移的影響。問題得到解決。

在canvas中，需要用到狀態管理的有以下這些方法：

1、context.rotate(angle);

2、context.scale(scaleX,scaleY);

3、transform(m11, m12, m21, m22, dx, dy);

4、setTransform(m11, m12, m21, m22, dx, dy)

我們在開發過程中用到這些方法的切記加上狀態管理機制，方能保證圖形按照我們預期的去繪制了。

關于canvas狀態管理就到這。這里是【暢哥聊技術】前端圖形學系列文章，更多精彩敬請關注，未完待續。。。

總結

以上是生活随笔為你收集整理的前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。