微信小程序使用canvas的画图操作示例

2023-08-31 15:10:04 365

本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考，具体如下：

基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。

1、下面介绍一下canvas的画图，我这个简单一点，画一个带图文的背景图，图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个


相册

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({
url:'图片路径',
success:function(res){
that.setData({
canvasimgbg:res.tempFilePath
})
}
})

4、我上面wxml代码里面写了一个按钮，使用wx.chooseImage调用了系统相册，所以说，我们选择一张图片画进canvas也是可以的，代码如下：

wx.chooseImage({
success:function(res){
that.setData({
chooseimg:res.tempFilePaths[0]
})
},
})

5、下面就是cancas画图啦，画和屏幕一样宽高的，然后我们再写一行字哈哈哈，代码如下：

varthat=this;
varwindowW=that.data.windowW;
varwindowH=that.data.windowH;
varcanvasimgbg=that.data.canvasimgbg;
varcanvasimg1=that.data.chooseimg;
canvas.drawImage(canvasimgbg,0,0,windowW,windowH);
canvas.drawImage(canvasimg1,0,10,200,200);
canvas.setFontSize(50)
canvas.fillText('Hello',200,200)
canvas.draw(true,setTimeout(function(){
that.daochu()
},1000));

使用canvas.draw()画图，完毕之后直接wx.canvasToTempFilePath导出图片

6、导出图片，代码如下：

varthat=this;
varwindowW=that.data.windowW;
varwindowH=that.data.windowH;
wx.canvasToTempFilePath({
x:0,
y:0,
width:windowW,
height:windowH,
destWidth:windowW,
destHeight:windowH,
canvasId:'canvas',
success:function(res){
console.log(res)
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res){
}
})
wx.previewImage({
urls:[res.tempFilePath],
})
}
})

上面这些代码已经完成啦！！！

主要就是各位使用的时候看需要什么样的啦！

下面还是附上完整的代码把！

//pages/canvas/canvas.js
Page({
/**
*页面的初始数据
*/
data:{
},
onLoad:function(options){
varthat=this;
that.sys();
that.bginfo();
},
sys:function(){
varthat=this;
wx.getSystemInfo({
success:function(res){
that.setData({
windowW:res.windowWidth,
windowH:res.windowHeight
})
},
})
},
bginfo:function(){
varthat=this;
wx.downloadFile({
url:'图片链接',//注意公众平台是否配置相应的域名
success:function(res){
that.setData({
canvasimgbg:res.tempFilePath
})
}
})
},
canvasdraw:function(canvas){
varthat=this;
varwindowW=that.data.windowW;
varwindowH=that.data.windowH;
varcanvasimgbg=that.data.canvasimgbg;
varcanvasimg1=that.data.chooseimg;
canvas.drawImage(canvasimgbg,0,0,windowW,windowH);
canvas.drawImage(canvasimg1,0,10,200,200);
canvas.setFontSize(50)
canvas.fillText('Hello',200,200)
canvas.draw(true,setTimeout(function(){
that.daochu()
},1000));
//canvas.draw();
},
daochu:function(){
console.log('a');
varthat=this;
varwindowW=that.data.windowW;
varwindowH=that.data.windowH;
wx.canvasToTempFilePath({
x:0,
y:0,
width:windowW,
height:windowH,
destWidth:windowW,
destHeight:windowH,
canvasId:'canvas',
success:function(res){
console.log(res)
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(res){
}
})
wx.previewImage({
urls:[res.tempFilePath],
})
}
})
},
chooseImage:function(){
varthat=this;
varcanvas=wx.createCanvasContext('canvas');
wx.chooseImage({
success:function(res){
that.setData({
chooseimg:res.tempFilePaths[0]
})
that.canvasdraw(canvas);
},
})
}
})

希望本文所述对大家微信小程序开发有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序使用canvas的画图操作示例

热门推荐

随机推荐