一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~
看效果:
代码:
const ctx = wx.createCanvasContext('canvas')
ctx.save()
ctx.setFillStyle('red')
ctx.scale(2, 2)
ctx.fillRect(10, 10, 150, 100) // 红色矩形一
ctx.restore()
ctx.fillRect(50, 50, 150, 100) // 黑色矩形二
ctx.draw()
通过以上代码,发现两个疑点:
- 明明写了填充red,为什么对黑色矩形二没有影响?
- 明明scale为两倍,为什么对黑色矩形二没有放大?
通过这个现象可以得出结论:
- save表示保存save函数之前的状态,restore表示获取save保存的状态
- save保存的是:scale默认是1,fullstyle默认是黑色;而scale为2和fullstyle为red并不属于save了,因为它们是save函数之后发生的改变
- save和restore之间写了很多状态改变,但是仅对红色矩形一有作用,而对于矩形二,由于它写在restore函数后面,所以它使用的是save保存的状态