canvas技術詳解（前端圖形學基礎）

2023-04-17 17:30:40 1

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

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

前端圖形學基礎（一）——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)為原點開始繪製的。廢話少說，直接上示例：

可以看到，兩個矩形都會受到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狀態管理就到這。這裡是【暢哥聊技術】前端圖形學系列文章，更多精彩敬請關注，未完待續。。。

,