2023年微信小程序save/restore（保存和恢復繪圖上下文）

微信小程序的繪圖接口和方法是非常重要的，其中最常用的之一便是canvasContext.save和canvasContext.restore。這兩個API可以很好地保存和恢復繪圖上下文，方便在同一個畫布中實現(xiàn)不同的繪圖效果。

使用canvasContext.save與canvasContext.restore

在繪制的過程中，我們經(jīng)常需要臨時改變樣式屬性。例如，在繪制一個圖形時，我們可能需要改變填充顏色或者改變邊框線寬。如果我們直接去更改全局的繪圖屬性，那么所有后面繪制的圖形都會受到影響，這顯然不是我們想要的。

這時，我們就可以使用canvasContext.save方法來保存當前的繪圖上下文狀態(tài)。然后在修改樣式屬性后繪制所需的圖形，并通過canvasContext.restore方法還原之前保存的繪圖狀態(tài)。

具體用法

1. 保存繪圖上下文狀態(tài)

調(diào)用canvasContext.save方法可以把當前繪圖上下文狀態(tài)壓入一個棧中。該方法不會對任何繪圖操作產(chǎn)生影響，只是簡單地把當前的狀態(tài)存儲起來。

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save() 
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

2. 恢復繪圖上下文狀態(tài)

一旦我們完成了修改樣式屬性并繪制出所需的圖形，就可以通過調(diào)用canvasContext.restore方法還原之前保存的繪圖上下文狀態(tài)。這會彈出棧頂部的狀態(tài)，并把它還原到當前的繪圖上下文中。

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()

使用canvasContext.save與canvasContext.restore方法可以很好地實現(xiàn)繪制不同風格、顏色和大小的對象。同時，因為這兩個方法操作簡單方便，非常適合在微信小程序中使用。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標明：himall原創(chuàng)>