如何使用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連接列表
                  })
                }
              })
            });