欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序小技巧系列《十一》canvas中的save和restore,view使用bindtap传值 ...

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

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

发布时间:2020-12-19  

 

一:canvas中的save和restore

 

一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~

看效果:

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

代码:

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保存的状态

二:view使用bindtap传值问题

分享者:王慧永

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

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