本期介紹Canvas繪製圖片，涉及到如何繪製高清圖片丶使用網路圖片/本地圖片丶日期轉化(陰陽曆/星期換算)丶圖片適配手機型號等。

佈局介紹

此處分為4塊，上面展示圖片，中間展示公眾號二維碼&日期，下面展示一些文字和公司的logo和名稱

wxml頁面

`<canvas  
 canvas-id="shareImg"       style="width:{{winWidth}}px;  height:{{winHeight}}px;  background:#FFF;" 
  bindlongtap="createImage">
  </canvas> ` 
 

wxss頁面(無)

日期轉化GregorianCalendar.JS頁面

/* 
 * 農曆資料表
 * 
 * 農曆分大小月，大月30天，小月29天，但一年中哪個月為大月，哪個月為小月，是無規律的。
 * 農曆每十年有4個閏年，但哪一年為閏年也是不確定的。
 * 而閏月中，哪個閏月為大月，哪個為小月也是不確定的。
 * 
 * 下面共20行，每行10個數據。每個資料代表一年，從陽曆1900.1.31日起，為第一個資料年的開始，即陽曆1900.1.31＝農曆0.1.1。
 * 200個數據可推200年的農曆，因此目前最大隻能推算到2100年
 * 
 * 對於每一個數據項，5個十六進位制數 = 20個二進位制位
 * 前4位，即0在這一年是閏年時才有意義，它代表這年閏月的大小月，為1則閏大月，為0則閏小月。
 * 中間12位，即4bd，每位代表一個月，為1則為大月，為0則為小月。
 * 最後4位，即8，代表這一年的閏月月份，為0則不閏。首4位要與末4位搭配使用。
 */
const lunarInfo = new Array(
    0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900年~1909年
    0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910年~1919年
    0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920年~1929年
    0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930年~1939年
    0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940年~1949年
    0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950年~1959年
    0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960年~1969年
    0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6, // 1970年~1979年
    0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980年~1989年
    0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, // 1990年~1999年
    0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000年~2009年
    0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010年~2019年
    0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020年~2029年
    0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030年~2039年
    0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040年~2049年
    0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050年~2059年
    0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060年~2069年
    0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070年~2079年
    0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080年~2089年
    0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090年~2099年
    0x0d520                                                                                   // 2100年
);

const minYear = 1900; // 能計算的最小年份
const maxYear = 2100; // 能計算的最大年份

// 陽曆每月天數，遇到閏年2月需加1天
const solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// 農曆月份別稱
const monthName = new Array('正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '臘月');

// 二十四節氣
const solarTerm = new Array(
    '小寒', '大寒', '立春', '雨水', '驚蟄', '春分',
    '清明', '穀雨', '立夏', '小滿', '芒種', '夏至',
    '小暑', '大暑', '立秋', '處暑', '白露', '秋分',
    '寒露', '霜降', '立冬', '小雪', '大雪', '冬至'
);

// 二十節氣相關係數
const termInfo = new Array(
    0, 21208, 42467, 63836, 85337, 107014,
    128867, 150921, 173149, 195551, 218072, 240693,
    263343, 285989, 308563, 331033, 353350, 375494,
    397447, 419210, 440795, 462224, 483532, 504758);

/**
 * 檢查年份是否輸入正確
 * @param year int 年份
 */
function _checkYear(year) {
    if (year < minYear) {
        throw new RangeError('年份不能小於' + minYear + '年');
    } else if (year > maxYear) {
        throw new RangeError('年份不能大於' + maxYear + '年');
    }
    return true;
}

/**
 * 檢查月份是否輸入正確
 * @param month int 月份
 */
function _checkMonth(month) {
    if (month < 1) {
        throw new RangeError('月份不能小於1');
    } else if (month > 12) {
        throw new RangeError('月份不能大於12');
    }
    return true;
}

/**
 * 檢查日期是否輸入正確
 * @param day int 日期
 */
function _checkDay(day) {
    if (day < 1) {
        throw new RangeError('日期不能小於1');
    } else if (day > 31) {
        throw new RangeError('日期不能大於31');
    }
    return true;
}

/**
 * 返回農曆year年中哪個月是閏月，沒有閏月返回0
 * @param year int 年份
 */
function getLunarLeapMonth(year) {
    if (_checkYear(year)) {
        return lunarInfo[year - minYear] & 0xf;  // 最後4位，代表這一年的閏月月份，為0則今年沒有閏月
    }
}

/**
 * 返回農曆year年閏月的天數（如果沒有閏月則返回0）
 * @param year int 年份
 */
function getLeapMonthDaysCount(year) {
    if (getLunarLeapMonth(year)) {
        return lunarInfo[year - minYear] & 0x10000 ? 30 : 29; // 前4位，即0在這一年是閏年時才有意義，它代表這年閏月的大小月
    }
    return 0;
}

/**
 * 返回農曆year年的總天數
 * @param year int 年份
 */
function getLunarYearDaysCount(year) {
    if (_checkYear(year)) {
        let sum = 348;  // 29天 * 12個月 = 348日    
        for (let i = 0x8000; i > 0x8; i >>= 1) {
            sum += (lunarInfo[year - minYear] & i ? 1 : 0);
        }
        return sum + getLeapMonthDaysCount(year);
    }
}

/**
 * 返回農曆year年month月的天數
 * @param year int 年份
 * @param month int 月份 1~12
 */
function getLunarYearMonthDaysCount(year, month) {
    if (_checkYear(year) && _checkMonth(month)) {
        return lunarInfo[year - minYear] & (0x10000 >> month) ? 30 : 29;
    }
}

/**
 * 農曆日期的中文字串
 * @param day int 日期
 */
function getLunarDayString(day) {
    if (_checkDay(day)) {
        const nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
        const nStr2 = new Array('初', '十', '廿', '卅');
        let str = '';
        switch (day) {
            case 10:
                str = '初十';
                break;
            case 20:
                str = '二十';
                break;
            case 30:
                str = '三十';
                break;
            default:
                str = nStr2[Math.floor(day / 10)];
                str += nStr1[day % 10];
                break;
        }
        return str;
    }
}

/**
 * 返回某年的第n個節氣為幾日(從0小寒起算)
 * @param year int 年份
 * @param n 節氣編號 0~23
 */
function getLunarTermDay(year, n) {
    if (_checkYear(year) && n <= 23 && n >= 0) {
        const sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
        const offDate = new Date((31556925974.7 * (year - minYear) + sTermInfo[n] * 60000) + Date.UTC(minYear, 0, 6, 2, 5));
        return offDate.getUTCDate();
    }
}

/**
 * 陽曆日期轉農曆日期
 * @param year int 年份
 * @param month int 月份 1~12
 * @param day int 日期 1~31
 */
function solarToLunar(year, month, day) {
    if (_checkYear(year) && _checkMonth(month) && _checkDay(day)) {
        const baseDate = new Date(minYear, 0, 31);      // 基礎日期1900年1月31日
        const objDate = new Date(year, month - 1, day); // 目標日期
        let offset = (objDate - baseDate) / 86400000;   // 偏移天數 60 * 60 * 24 * 1000 = 86400000，1天的毫秒數
        let monCycle = 14;
        let temp = 0;
        let i = 0;

        for (i = minYear; i < maxYear && offset > 0; i++) {
            temp = getLunarYearDaysCount(i);             // 農曆year年的總天數
            if (offset - temp < 0) {
                break;
            } else {
                offset -= temp;
            }
            monCycle += 12;
        }


        const lunarYear = i;                             // 農曆年份        
        const leap = getLunarLeapMonth(lunarYear);       // 當年閏月是哪個月
        const isLeapYear = leap > 0 ? true : false;      // 當年是否有閏月        
        let isLeapMonth = false;                         // 當前農曆月份是否是閏月
        for (i = 1; i <= 12 && offset > 0; i++) {
            if (leap > 0 && i == (leap + 1) && !isLeapMonth) {
                --i;
                isLeapMonth = true;
                temp = getLeapMonthDaysCount(year);
            } else {
                temp = getLunarYearMonthDaysCount(year, i);
            }

            if (isLeapMonth && i == (leap + 1)) {
                isLeapMonth = false;
            }

            offset -= temp;
            if (!isLeapMonth) {
                monCycle++;
            }
        }

        if (offset == 0 && leap > 0 && i == leap + 1) {
            if (isLeapMonth) {
                isLeapMonth = false;
            } else {
                isLeapMonth = true;
                --i;
                --monCyl;
            }
        }

        if (offset < 0) {
            offset += temp;
            --i;
            --monCycle;
        }
        const lunarMonth = i;        // 農曆月份
        const lunarDay = offset + 1; // 農曆日期

        let monthStr = '';
        if (isLeapYear) {
            if (lunarMonth < leap) {
                monthStr = monthName[lunarMonth - 1];
            } else if (lunarMonth == leap) {
                monthStr = '閏' + monthName[lunarMonth - 1];
            } else {
                monthStr = monthName[lunarMonth - 2];
            }
        } else {
            monthStr = monthName[lunarMonth - 1];
        }

        return {
            year: lunarYear,                    // 農曆年份
            month: lunarMonth,                  // 農曆月份
            day: lunarDay,                      // 農曆日期
            isLeap: isLeapMonth,                // 是否閏月
            monthStr: monthStr,                 // 月份字串
            dayStr: getLunarDayString(lunarDay) // 日期字串
        };
    }
}

/**
 * 陽曆某個月份天數
 * @param year int 年份
 * @param month int 月份 1~12
 */
function getSolarMonthDaysCount(year, month) {
    if (_checkYear(year) && _checkMonth(month)) {
        if (month == 2) {
            return (((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) ? 29 : 28);
        } else {
            return solarMonth[month - 1];
        }
    }
}

/**
 * 獲取指定日期是陽曆年中的第幾天
 * @param year int 年份
 * @param month int 月份 1-12
 * @param day int 日期
 */
function getSolarDayNumber(year, month, day) {
    if (_checkYear(year) && _checkMonth(month) && _checkDay(day)) {
        const date = new Date(year, month - 1, day);
        const d = date.getDate(); // 本月第幾天
        const m = month - 1;
        let sum = d;
        for (let i = 0; i < m; i++) {
            sum += solarMonth[i];
        }

        if (m > 1 && (year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
            sum += 1;
        }

        return sum;
    }
}

/**
 * 計算指定日期是否屬於24節氣
 * @param year int 年份
 * @param month int 月份 1~12
 * @param day int 日期 1~31
 */
function getLunar24Days(year, month, day) {
    if (_checkYear(year) && _checkMonth(month) && _checkDay(day)) {
        const baseDate = new Date(1900, 0, 6, 2, 5, 0);
        let str = false;
        for (let i = 1; i <= 24; i++) {
            const num = 525948.76 * (year - 1900) + termInfo[i];
            const timestamp = baseDate.getTime() + num * 60 * 1000;
            const newDate = new Date(timestamp);
            if (getSolarDayNumber(newDate.getFullYear(), newDate.getMonth() + 1, newDate.getDate()) ==
                getSolarDayNumber(year, month, day)) {
                str = solarTerm[i];
                break;
            }
        }
        return str;
    }
}

module.exports = {
    getLunarLeapMonth,          // 返回農曆year年中哪個月是閏月，沒有閏月返回0
    getLeapMonthDaysCount,      // 返回農曆year年閏月的天數（如果沒有閏月則返回0）
    getLunarYearDaysCount,      // 返回農曆year年的總天數
    getLunarYearMonthDaysCount, // 返回農曆year年month月的天數
    getLunarDayString,          // 農曆日期的中文字串        
    getLunarTermDay,            // 返回某年的第n個節氣為第幾日    
    getSolarMonthDaysCount,     // 獲取陽曆某個月份有多少天
    getSolarDayNumber,          // 獲取指定日期是陽曆年中的第幾天
    getLunar24Days,             // 計算指定日期是否屬於24節氣    
    solarToLunar,               // 陽曆日期轉農曆日期
    getDates: getDates,         // 日期轉化周幾
}

//獲取d當前時間多少天后的日期和對應星期
function getDates(days,todate = getCurrentMonthFirst) {//todate預設引數是當前日期，可以傳入對應時間
  // var dateArry = [];
  // for (var i = 0; i < days; i++) {
  var dateObj = dateLater(days, 0);
  //   dateArry.push(dateObj)
  // }
    return dateObj;
}
/**
   * 傳入時間後幾天
   * param：傳入時間：dates:"2018-04-02",later:往後多少天
   */
function dateLater(dates,later) {
  let dateObj = {};
  let show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  dateObj.year = date.getFullYear();
  dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
  dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.week = show_day[day];
  return dateObj;
}

//獲取當前時間
function getCurrentMonthFirst() {
  var date = new Date();
  var todate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  return todate;
}

 

使用得到你想要的資料(如：農曆，氣，農曆月份別稱等)
使用起來很方便：只需要引入js，然後呼叫即可。例如：我要使用到陽曆轉陰曆：
引入js：const GregorianCalendar = require('../../utils/GregorianCalendar.js');
呼叫相關fucntion：GregorianCalendar.solarToLunar(year, month, day)

第三點出的文字繪製類似不做過多介紹

文字xljt.js程式碼頁面

var xljt = [{
  "name": "當一個人在我們身邊的時候，我們不會知道與他分別的時地。就像我們在生的時候，亦不知道死。",
    "id": "1"
  }, {
    "name": "如果有幸福幸福只是瞬間的片段，一小段一小段緣分叵測，我們無從得知下一刻會發生一些什麼。",
    "id": "2"
  }, {
    "name": "每個人都有權利選擇自己的生活方式。但換言之,人又是被拘禁的,從未曾得到權利決定自己的生活。",
    "id": "3"
  }, {
    "name": "人生在世最大的勇氣不是不怕死亡，而是堅強的活著，勇敢的面對生活帶給的壓力和考驗！",
    "id": "4"
  }, {
    "name": "沙礫通過不斷地磨礪，讓自己的稜角盡失後才會成為璀璨圓潤的明珠，散發出世人所鍾愛的光澤。",
    "id": "5"
  }, {
    "name": "太多的曾經我們未曾把握，太多的機會我們一再錯過。與其事竟過去之時的嘆息。。。不如用心好好珍惜所有。",
    "id": "6"
  }, {
    "name": "人生有許多選擇,每一步都要慎重。一次選擇不能決定一切,作出選擇就不要後悔。只要我們不屈不撓地奮鬥,勝利就在前方。",
    "id": "7"
  }, {
    "name": "為了向別人、向世界證明自己而努力拼搏，而一旦你真的取得了成績，才會明白：人無須向別人證明什麼，只要你能超越自己。",
    "id": "8"
  }, {
    "name": "朝著一定目標走去是“志”，一鼓作氣中途絕不停止“氣”，兩者合起來就是“志氣”。一切事業的成敗都取決於此。",
    "id": "9"
  }, {
    "name": "你可以忘掉失敗，但不能忘掉教訓;你可以忘掉苦難，但不能忘卻艱辛;你可以忘掉傷疤,但不能忘卻恥辱。",
    "id": "10"
  }, {
    "name": "事物是辯證的，當你得到一些東西時，同時也會讓你失去另一些東西;當你失去一些東西時，同時也會讓你得到一些東西。​",
    "id": "11"
  }, {
    "name": "把懶惰放一邊，把喪氣的話收一收，把積極性提一提，把矯情的心放一放。所有想要的，都得靠自己的努力才能得到。",
    "id": "12"
  }, {
   
    "name": "我們是活給自己看的,不必沉浸在他人的語言中,蜷縮於世外的陰影下。你若裹足不前,有人偷著笑;你若掙開束縛,前方春暖花開。",
    "id": "13"
  }, {
    "name": "那長在石縫間的綠色尤物,它給人以鼓舞、給人以力量。任憑風霜雪雨,依然坦然面對！這就是頑勁,倔強,是生命的絢麗與輝煌！",
    "id": "14"
  }, {
    "name": "給自己一份信心,去擁抱這個世界,讓今天過得充實,讓明天充滿希望;光陰中的美,是來自心底的熱愛和對未來的憧憬和嚮往。",
    "id": "15"
  }, {
    "name": "越有故事的人越沉靜簡單，越膚淺單薄的人越浮躁不安。世上所有的驚喜和好運，等於你的人品乘以你的努力。",
    "id": "16"
  }, {
    "name": "思想會變成你的言語;言語會變成你的行動;行動會變成你的習慣;習慣會變成你的性格;性格會變成你的命運。",
    "id": "17"
  }, {
    "name": "別人所擁有的，你不必去羨慕，只要你努力，你也會擁有；自己擁有的，你不必炫耀，因為別人也在奮鬥，也是會擁有。",
    "id": "18"
  }, {
    "name": "事實上確實是當我們失去的時候，才知道自己曾經擁有；但有沒有注意到當有些東西來臨的時候，我們已錯過。",
    "id": "19"
  }, {
    "name": "喜歡在這裡發呆的時光。喜歡那種不知不覺時間就流走的感覺。我說我活的太快。似乎一下子就要過完一生似的。",
    "id": "20"
  }, {
    "name": "健康的才是美麗的，合適的才是最好的，常新的才是迷人的，平凡的才是偉大的，堅韌的才是長久的，真實的才是永恆的。",
    "id": "21"
  }, {
    "name": "學會調整自己，儘快地從不幸和失意中奮起，這樣得來的成功更值得自豪。即使是失敗，經過了努力也值得回味。",
    "id": "22"
  }, {
    "name": "當愛情已經漸漸地不可阻擋地淡去，誰還會在乎曾經愛過的人被一首傷心的情歌傷得不能動彈？誰還會站在原地，不離不棄？",
    "id": "23"
  },
  {
    "name": "人生之路不平坦，坦然面對很關鍵，談笑風生煙雲過，克難攻堅不等閒，快樂奔跑永向前，九轉功成笑開顏。願你坦然處之，努力搏之，成功等候。",
    "id": "24"
  }, {
    "name": "有眼界才有境界，有實力才有魅力，有思路才有出路，有作為才有地位。政從正來，智從知來，財從才來，位從為來!",
    "id": "25"
  }, {
    "name": "最常見的勇氣就是在日常生活中做到誠實和正直，能夠抵制誘惑，敢於講真話，表現自己真實的一面，而不要虛偽造作。",
    "id": "26"
  }, {
    "name": "目標的堅定是性格中最必要的力量源泉之一，也是成功的利器之一。沒有它，天才會在矛盾無定的迷徑中徒勞無功。",
    "id": "27"
  }, {
    "name": "如果你失去了太陽，你還有星光的照耀；失去了金錢，還會得到友情；當生命離開你的時候，你卻擁有大地的親吻。",
    "id": "28"
  }, {
    "name": "幸福的關鍵不在與找到一個完美的人，而在找到任何一個人，然後和他一起努力建立一個完美的關係。",
    "id": "29"
  }, {
    "name": "只要認為是對的就去做，堅持去做，不要在乎別人的看法，哪怕是錯，至少你有去做過證明曾經你努力過。",
    "id": "30"
  }, {
    "name": "當你無法從一樓蹦到三樓時,不要忘記走樓梯。要記住偉大的成功往往不是一蹴而就的,必須學會分解你的目標,逐步實施。",
    "id": "31"
  },
]
module.exports = {
  xljt
}
 

使用：const xljt = require('../../utils/xljt.js');
引用：var name = xljt.xljt[day].name;

util.js程式碼頁面

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime
}

繪製圖片.JS頁面

// 引入配置

const GregorianCalendar = require('../../utils/GregorianCalendar.js');

const util = require('../../utils/util.js');
const xljt = require('../../utils/xljt.js');
// 顯示繁忙提示
var showBusy = text => wx.showToast({
  title: text,
  icon: 'loading',
  duration: 10000
});

Page({

  /**
   * 頁面的初始資料 
   */
  data: {
    url: '',
    winWidth: 0,
    winHeight: 0,
    oneHeight: 0,// 風景圖的高度
    ewmWidth: 0,//二維碼的高度

    oneWidth: 0,//左右兩邊的空白
    twoWidth: 0,//二維碼和邊框之間的距離
    fontHeight: 0,
    text1: '',
    text2: '',
    text3: '',
    text4: ''
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

    wx.showLoading({
      title: '圖片載入中...',
    });
    var winWidth = 0;
    var winHeight = 0;
    wx.getSystemInfo({
      success: function (res) {
        console.log("....", res)
        winWidth = res.windowWidth;
        winHeight = res.windowHeight
      }
    })
    this.setData({
      winWidth: winWidth,
      winHeight: winWidth * 1.25 + winWidth * 0.16 + winWidth * 0.16 * 0.8 + 100,
      oneHeight: winWidth * 1.25,// 風景圖的高度
      ewmWidth: winWidth * 0.16,//二維碼的高度
      oneWidth: winWidth * 0.16,//左右兩邊的空白
      twoWidth: winWidth * 0.04,//二維碼和邊框之間的距離
      fontHeight: (winWidth * 0.16 + 22) * 0.5, //字型上下居中
    })
    console.log("fontHeight", this.data.fontHeight)
    var time = util.formatTime(new Date).substring(0, 10);
    var year = time.substring(0, 4);
    var month = time.substring(5, 7);
    var day = time.substring(8, 10);
    if (month <= 9) {
      month = time.substring(6, 7)
    }
    if (day <= 9) {
      day = time.substring(9, 10);
    }
    var length = xljt.xljt[day].name.length;
    var name = xljt.xljt[day].name;
    if (this.data.winWidth <= 330) {
      if (length < 19) {
        this.setData({
          text1: name,
        })
      } else if (length >= 19 && length < 38) {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
        })
      } else if (length >= 38 && length < 57) {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
          text3: name.substring(38, 57),
        })
      } else {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
          text3: name.substring(38, 57),
          text4: name.substring(57, length),
        })
      }
    } else if (this.data.winWidth > 330 && this.data.winWidth < 400) {

      if (length < 22) {
        this.setData({
          text1: name,
        })
      } else if (length >= 22 && length < 44) {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
        })
      } else if (length >= 44 && length < 66) {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
          text3: name.substring(44, 66),
        })
      } else {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
          text3: name.substring(44, 66),
          text4: name.substring(66, length),
        })
      }
    } else {
      if (length < 25) {
        this.setData({
          text1: name,
        })
      } else if (length >= 25 && length < 50) {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
        })
      } else if (length >= 50 && length < 75) {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
          text3: name.substring(50, 75),
        })
      } else {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
          text3: name.substring(50, 75),
          text4: name.substring(75, length),
        })
      }
    }

    console.log("陽曆轉陰曆：", GregorianCalendar.solarToLunar(year, month, day));
    console.log("周幾", GregorianCalendar.getDates(time, time));

    this.setData({
      url:'../../image/11.jpg',
         days: month + '/' + day,
      data: GregorianCalendar.solarToLunar(year, month, day).monthStr + GregorianCalendar.solarToLunar(year, month, day).dayStr,
      week: GregorianCalendar.getDates(time, time).week,
      year: year
    })

    this.Image();
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },
  //繪製圖片
  Image: function () {
    var that = this;
    var promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../image/gzhewm.png',
        success: function (res) {
          console.log('promise1', res)
          resolve(res);
        }
      })
    });

    var promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({

        src: '../../image/11.jpg',

        success: function (res) {
          console.log('promise2', res)
          resolve(res);
        }
      })
    });
    var promise3 = new Promise(function (resolve, reject) {
      wx.getImageInfo({

        src: '../../image/white.jpg',

        success: function (res) {
          console.log('promise3', res)
          resolve(res);
        }
      })
    });
    var promise4 = new Promise(function (resolve, reject) {
      wx.getImageInfo({

        src: '../../image/logo.png',

        success: function (res) {
          console.log('promise4', res)
          resolve(res);
        }
      })
    });
    Promise.all([
      //   promise1
      promise1, promise2, promise3, promise4
    ]).then(res => {
      console.log("res", res)
      const ctx = wx.createCanvasContext('shareImg')
      
      //主要就是計算好各個圖文的位置
      ctx.drawImage('../../' + res[2].path, 0, 0, that.data.winWidth, that.data.winHeight)
    //注意網路圖片不需要加../../，本地的需要
    //  ctx.drawImage( res[1].path, 0, 0, that.data.winWidth, that.data.oneHeight)

      ctx.drawImage('../../' +res[1].path, 0, 0, that.data.winWidth, that.data.oneHeight)
      ctx.drawImage('../../' + res[0].path, that.data.oneWidth, that.data.oneHeight + 10, that.data.ewmWidth, that.data.ewmWidth)
      ctx.drawImage('../../' + res[3].path, that.data.oneWidth * 0.5, that.data.oneHeight + that.data.ewmWidth + 80, that.data.winWidth - that.data.oneWidth, that.data.ewmWidth * 0.8)
      ctx.setStrokeStyle('#9b4400')

      //上方兩根線
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth, that.data.oneHeight + 10)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth, that.data.oneHeight + 10)
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 5, that.data.oneHeight + 15)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth - 5, that.data.oneHeight + 15)
      //下方兩根線
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth, that.data.oneHeight + that.data.ewmWidth + 10)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth, that.data.oneHeight + that.data.ewmWidth + 10)
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 5, that.data.oneHeight + that.data.ewmWidth + 5)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth - 5, that.data.oneHeight + that.data.ewmWidth + 5)
      //左邊兩根線
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth, that.data.oneHeight + 10)
      ctx.lineTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth, that.data.oneHeight + that.data.ewmWidth + 10)
      ctx.moveTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 5, that.data.oneHeight + 15)
      ctx.lineTo(that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 5, that.data.oneHeight + that.data.ewmWidth + 5)
      //右邊兩根線
      ctx.moveTo(that.data.winWidth - that.data.oneWidth, that.data.oneHeight + 10)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth, that.data.oneHeight + that.data.ewmWidth + 10)
      ctx.moveTo(that.data.winWidth - that.data.oneWidth - 5, that.data.oneHeight + 15)
      ctx.lineTo(that.data.winWidth - that.data.oneWidth - 5, that.data.oneHeight + that.data.ewmWidth + 5)


      ctx.setFillStyle('#9b4400')
      if (that.data.winWidth < 350) {
        ctx.setFontSize(30)
        ctx.fillText(that.data.days, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 10, that.data.oneHeight + that.data.fontHeight + 10)
        ctx.setFontSize(16)

        ctx.fillText(that.data.year, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 86, that.data.oneHeight + that.data.fontHeight - 4)
        ctx.fillText(that.data.week, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 80, that.data.oneHeight + that.data.fontHeight + 13)
      } else if (that.data.winWidth >= 350 && that.data.winWidth <= 400) {
        ctx.setFontSize(32)
        ctx.fillText(that.data.days, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 10, that.data.oneHeight + that.data.fontHeight + 10)
        ctx.setFontSize(20)

        ctx.fillText(that.data.year, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 96, that.data.oneHeight + that.data.fontHeight - 5)
        ctx.fillText(that.data.week, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 90, that.data.oneHeight + that.data.fontHeight + 16)
      } else {
        ctx.setFontSize(32)
        ctx.fillText(that.data.days, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 10, that.data.oneHeight + that.data.fontHeight + 10)
        ctx.setFontSize(20)

        ctx.fillText(that.data.year, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 106, that.data.oneHeight + that.data.fontHeight - 5)
        ctx.fillText(that.data.week, that.data.oneWidth + that.data.ewmWidth + that.data.twoWidth + 100, that.data.oneHeight + that.data.fontHeight + 20)
      }



      ctx.setFillStyle('#808080')
      ctx.setFontSize(14)
      if (that.data.text1.length != '') {
        ctx.fillText(that.data.text1, that.data.oneWidth * 0.5, that.data.oneHeight + that.data.ewmWidth + 30)
      }
      if (that.data.text2 != '') {
        ctx.fillText(that.data.text2, that.data.oneWidth * 0.5, that.data.oneHeight + that.data.ewmWidth + 48)
      }
      if (that.data.text3.length != '') {
        ctx.fillText(that.data.text3, that.data.oneWidth * 0.5, that.data.oneHeight + that.data.ewmWidth + 66)
      }

      if (that.data.text4.length != '') {
        ctx.fillText(that.data.text4, that.data.oneWidth * 0.5, that.data.oneHeight + that.data.ewmWidth + 84)
      }


      ctx.stroke()
      ctx.draw();

    })

  },
  //生成圖片
  createImage: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.winWidth,
      height: that.data.winHeight,
      destWidth: that.data.winWidth * 2.5,
      destHeight: that.data.winHeight * 2.5,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          //hidden: false
        })
        wx.hideLoading()


        that.sleep(1000);
        wx.getSetting({
          success: (res) => {
            if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) {
              //沒有獲取到許可權
              wx.openSetting({
                success: function (data) {
                  if (data.authSetting["scope.writePhotosAlbum"] == true) {
                    wx.saveImageToPhotosAlbum({
                      filePath: that.data.prurl,
                      success(res) {
                        console.log("儲存成功：", res);
                        wx.showModal({
                          content: '圖片已儲存到相簿，趕緊晒一下吧~',
                          showCancel: false,
                          confirmText: '好的',
                          confirmColor: '#333',
                          success: function (res) {
                            if (res.confirm) {
                              console.log('使用者點選確定');
                              /* 該隱藏的隱藏 */
                              that.setData({
                                hidden: true
                              })
                            }
                          }
                        })
                      }
                    })


                  } else {
                    console.log("拒絕授權");
                  }

                },

              })
            } else {
              wx.saveImageToPhotosAlbum({
                filePath: that.data.prurl,
                success(res) {
                  console.log("儲存成功：", res);
                  wx.showModal({
                    content: '圖片已儲存到相簿，趕緊晒一下吧~',
                    showCancel: false,
                    confirmText: '好的',
                    confirmColor: '#333',
                    success: function (res) {
                      if (res.confirm) {
                        console.log('使用者點選確定');
                        /* 該隱藏的隱藏 */
                        that.setData({
                          hidden: true
                        })
                      }
                    }
                  })
                }
              })
            }
          }

        })

      },
      fail: function (res) {
        console.log(res)
      }
    })

  },

  sleep: function (ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  },
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  },
  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  },
  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
  },
  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  },
})

此處程式碼過多，下面拆分講解：

適配機型程式碼
通過微信提供的api得到手機螢幕大小。然後賦值給要繪製的圖片(wx.getSystemInfo)。
然後具體規劃圖片(4塊區域)尺寸.註釋中有關於4部分的大小。不再做描述。

var winHeight = 0;
    wx.getSystemInfo({
      success: function (res) {
        console.log("....", res)
        winWidth = res.windowWidth;
        winHeight = res.windowHeight
      }
    })
    this.setData({
      winWidth: winWidth,
      winHeight: winWidth * 1.25 + winWidth * 0.16 + winWidth * 0.16 * 0.8 + 100,
      oneHeight: winWidth * 1.25,// 風景圖的高度
      ewmWidth: winWidth * 0.16,//二維碼的高度
      oneWidth: winWidth * 0.16,//左右兩邊的空白
      twoWidth: winWidth * 0.04,//二維碼和邊框之間的距離
      fontHeight: (winWidth * 0.16 + 22) * 0.5, //字型上下居中
    })

注：第三部分文字適配，暫時是通過螢幕寬度來處理。先得到整個文字的長度，在更據螢幕大小來處理，通過330/400做分割線。以及文字總長度第二分割點。(有更好的解決方案可以留言哦。)

  var length = xljt.xljt[day].name.length;
    var name = xljt.xljt[day].name;
    if (this.data.winWidth <= 330) {
      if (length < 19) {
        this.setData({
          text1: name,
        })
      } else if (length >= 19 && length < 38) {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
        })
      } else if (length >= 38 && length < 57) {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
          text3: name.substring(38, 57),
        })
      } else {
        this.setData({
          text1: name.substring(0, 19),
          text2: name.substring(19, 38),
          text3: name.substring(38, 57),
          text4: name.substring(57, length),
        })
      }
    } else if (this.data.winWidth > 330 && this.data.winWidth < 400) {

      if (length < 22) {
        this.setData({
          text1: name,
        })
      } else if (length >= 22 && length < 44) {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
        })
      } else if (length >= 44 && length < 66) {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
          text3: name.substring(44, 66),
        })
      } else {
        this.setData({
          text1: name.substring(0, 22),
          text2: name.substring(22, 44),
          text3: name.substring(44, 66),
          text4: name.substring(66, length),
        })
      }
    } else {
      if (length < 25) {
        this.setData({
          text1: name,
        })
      } else if (length >= 25 && length < 50) {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
        })
      } else if (length >= 50 && length < 75) {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
          text3: name.substring(50, 75),
        })
      } else {
        this.setData({
          text1: name.substring(0, 25),
          text2: name.substring(25, 50),
          text3: name.substring(50, 75),
          text4: name.substring(75, length),
        })
      }
    }

下面繪製圖片
上面程式碼已經提供過這邊就不重複貼上了(上文中的繪製圖片.JS頁面中的那個Image方法就是繪製圖片的程式碼)，通過Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。然後繪製對應的圖片，計算線條的位置繪製即可。
稍微講解下我的思路(為啥我的程式碼嗨多？？？)：
首先我是稍微適配了下手機型號：

  winWidth: winWidth,
      winHeight: winWidth * 1.25 + winWidth * 0.16 + winWidth * 0.16 * 0.8 + 100,
      oneHeight: winWidth * 1.25,// 風景圖的高度
      ewmWidth: winWidth * 0.16,//二維碼的高度
      oneWidth: winWidth * 0.16,//左右兩邊的空白
      twoWidth: winWidth * 0.04,//二維碼和邊框之間的距離
      fontHeight: (winWidth * 0.16 + 22) * 0.5, //字型上下居中

然後我在繪製的時候引用先關寬高，所以程式碼過於繁瑣，如果對適配要求不高的可以刪去這些程式碼，問題不大哦。。。
提示：1.網路圖片繪製的時候不需要相對路勁 ‘…/…/’, 而繪製本地圖片需要使用的哦。2.繪製高清圖片,只要在呼叫wx.canvasToTempFilePath的時候將destWidth和destHeight屬性設定為螢幕寬高的2-2.5倍，那就可以繪製出高清圖片啦
本次canvas的繪製就講解到這邊，不清楚的可以留言哈。