在小程序中使用canvas的方法示例

 /* 選擇顏色
 ob: 對象
 value：顏色值 */
 changeColor: function(e) {
 var value = e.target.dataset.value;
 if (this.data.ob && value) {
 wx.setStorageSync(this.data.ob, value);
 wx.navigateTo({
 url: '/pages/wallpaper/wallpaper',
 });
 }
 },

<template is="msgItem" data="{{...item}}"/> // 展開
<template is="msgItem" data="{{item}}"/>

// 生成圖片
 drawPicture: function(val) {
 const that = this;
 const btnName = val.currentTarget.dataset.btnName;
 wx.canvasToTempFilePath({
 canvasId: 'myCanvas',
 success: function (res) {
 if (btnName === 'preview') {
 that.preview(res.tempFilePath);
 } else if (btnName === 'save') {
 that.save(res.tempFilePath);
 }
 },
 fail: function (err) {
 console.log(err);
 }
 })
 },

// 預覽
 preview: function(val) {
 if(val) {
 wx.previewImage({
 urls: [val] // 需要預覽的圖片http鏈接列表
 })
 }
 },
// 保存
 save: function(val) {
 if(val) {
 wx.saveImageToPhotosAlbum({
 filePath: val,
 success: function (res) {
 console.log('成功');
 },
 fail: function (err) {
 console.log('失敗', err);
 if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
 wx.openSetting({
 success(settingdata) {
 console.log(settingdata)
 if (settingdata.authSetting['scope.writePhotosAlbum']) {
 console.log('獲取權限成功，給出再次點擊圖片保存到相冊的提示。')
 } else {
 console.log('獲取權限失敗，給出不給權限就無法正常使用的提示')
 }
 }
 })
 }
 }
 });
 }
 },

// 裁減-換行(measureText)
 var lastSubStrIndex = 0;
 var dTextWidth = 0;
 var lineHeight = 20; // 行高
 var initX = 10; // 起始X坐標
 var initY = canvasHeight / 2; // 起始Y坐標
 for(var i = 0; i < dText.length; i++) {
 dTextWidth += ctx.measureText(dText[i]).width;
 if (dTextWidth > canvasWidth - initX) {
 ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
 initY += lineHeight;
 dTextWidth = 0;
 lastSubStrIndex = i;
 }
 if (i == dText.length-1) {
 ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
 }
 }