微信小程序小技巧系列《十一》canvas中的save和restore，view使用bindtap传值 ... ...

发布者: x06x06 | 发布时间: 2018-2-25 14:57| 查看数: 4600| 评论数: 1|帖子模式

一：canvas中的save和restore

作者：xiaoxiapxiao，来自授权地址

一直以来没有特别明白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()1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

通过以上代码，发现两个疑点：

明明写了填充red，为什么对黑色矩形二没有影响？
明明scale为两倍，为什么对黑色矩形二没有放大？

通过这个现象可以得出结论：

save表示保存save函数之前的状态，restore表示获取save保存的状态
save保存的是：scale默认是1，fullstyle默认是黑色；而scale为2和fullstyle为red并不属于save了，因为它们是save函数之后发生的改变
save和restore之间写了很多状态改变，但是仅对红色矩形一有作用，而对于矩形二，由于它写在restore函数后面，所以它使用的是save保存的状态

参考：

二：view使用bindtap传值问题

如图，view标签加 bindtap事件，用data-name传值，如果view中只有文字，点击整个view区域都可以接收到data-name的值，如果view里面加一个lable标签，那么点击lable包裹的区域，data-name取不到值。解决方法：把取值方式由e.target.dataset.carrierName 修改为e.currentTarget.dataset.carrierName即可

微信canvas

收藏0