小程式畫布製作：

第一步：

wxml:<canvas style="width: 375px;height: 667px;position:fixed;top:9999px;z-index=999" canvas-id="mycanvas"/>

第二步：

js:

定義容器

var context = wx.createCanvasContext('mycanvas');

畫布從哪裡開始，長和寬

context.fillRect(0, 0, 375, 667)

畫布圖片

var path = "../../images/bg.png";

context.drawImage(path, 0, 0, 375, 667);

畫布文字

context.setFontSize(22);

context.setFillStyle('#fff');

context.setTextAlign('center');

context.fillText(‘文字’, 185, 410);

context.stroke();

//線

context.setStrokeStyle('#fff');

context.setLineWidth(2);

context.moveTo(210, 445) // 操作類似“把手放到圖版的這個位置（x,y）”

context.lineTo(250, 445) // 操作類似“從剛剛移動到的位置(moveTo)預想畫到這裡(x,y)”

context.stroke()

//圓

var avatarurl_width = 50; //繪製的頭像寬度

var avatarurl_heigth = 50; //繪製的頭像高度

var avatarurl_x = 165; //繪製的頭像在畫布上的位置

var avatarurl_y = 135; //繪製的頭像在畫布上的位置

context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

context.clip();

context.drawImage(path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);

context.draw();

//將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時

setTimeout(function () {

wx.canvasToTempFilePath({

canvasId: 'mycanvas',

success: function (res) {

var tempFilePath = res.tempFilePath;

},

fail: function (res) {

console.log(res);

}

});

}, 200);