本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下:
基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。
1、下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个标签,一定要写上canvas-id='canvas的id',这是必须条件,如下面代码:
相册
2、上面canvas的宽高都是js控制的,使用?wx.getSystemInfo获取屏幕的可见宽高。代码如下:
wx.getSystemInfo({
success: function (res) {
that.setData({
windowW: res.windowWidth,
windowH: res.windowHeight
})
},
})
相当的详细,有没有!!!
3、重点注意一下:在微信小程序的canvas画图中如果使用了网络图片,一定要先把这张图片读取下载下来(可使用wx.downloadFile),存为网络格式的图片!!!
上面这个操作是避免网络状况不好的时候canvas画图完成了背景图片确显示不出来的情况,同时,这个图片所在的域名必须在微信公众平台配置一下,代码如下:
wx.downloadFile(