画一个矩形
//创建一个画布 const ctx = wx.createCanvasContext('myCanvas') // 设置矩形边框 ctx.setStrokeStyle('#fff') // 设置矩形宽高 四个参数,前俩个为x,y轴,后俩个是矩形的宽和高
在画布上填充文字
// 设置文字大小 ctx.setFontSize(14) // 设置文字颜色 ctx.fillStyle = '#9d9d9d'; //设置字体 ctx.font = '黑体'; // 填充文字 在画布上填充图片 let canvas ='../../resource/canvas.png';
网络图片本地保存
// // 封面图 var path = 'https://www.weiuid.com/attachs/uploads/20180904/f807827b32d5668462ac3e51f949592e.jpg'; wx.getImageInfo({ src: path,//服务器返回的图片地址 success: function (res) { //res.path是网络图片的本地地址 let Path = res.path; ctx.drawImage(Path, 0, 0, 400, 200) }, fail: function (res) { //失败回调 }
最后一步即可
ctx.draw()
将canvas画完之后,保存为图片,进行预览
ctx.draw(false, function () { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function (res) { console.log(res.tempFilePath) wx.previewImage({ urls: [res.tempFilePath] // 需要预览的图片http链接列表 }) } }) });