如何使用canvas进行画图

画一个矩形

//建立一个画布
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连接列表
                  })
                }
              })
            });