小程式的canvas繪圖絕對是整個小程式開發中坑最多的了 。

先上效果圖：

實現步驟就是點選生成圖片 在canvas畫布中畫出一張海報 然後儲存在本地 在imags標籤中展示，此處儘可能的把canvas元件隱藏  但是不能用wx：if。 用hidden或者display屬性

<button bindtap='gotoSubmit'>生成圖片</button>
<!-- 彈框 -->
<view class='tankuang2' wx:if="{{showhaibao}}">
    <view class='container1' bindtap="previewImg">
          <image style="width:100%;height:80%"  src="{{imagePath}}" ></image>
    </view>
</view>
<canvas style="width:{{windowW}}px;height:{{windowH}}px;display:{{maskHidden?'none':''}}" canvas-id="mycanvas" />
 

css不做說明直接上程式碼

button{
    width: 100%;
    position: fixed;
    z-index: 1;
    bottom:0;
}
.tankuang2{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tankuang2 .container1{
    height: 90%;
    width: 90%;
    background-color:#FFF;

}
 

 第一大坑

我在js中註釋的程式碼很重要，實際開發中繪製商品海報必然是用網路圖片，但經過多次嘗試網路圖片是不可以直接繪製在canvas畫布上的，就必須要把他快取下來，弄一個本地路徑，此處我用本地圖片所以就註釋了

第二大坑    坑

經過多次測試發現當你第一次點選生成圖片的時候，它會生成一張透明的圖片，根本看不到，必須要點選兩次，就是呼叫兩次生成圖片的方法才可以看到生成的圖片，我這裡為了只讓他點選一次就生成圖片，在小程式生命週期函式onReady先呼叫一次 初始化一下圖片。

好了以下就是具體程式碼

Page({
    data: {
      showhaibao：false，//隱藏顯示
        maskHidden: true,//隱藏顯示
    },
    onLoad: function(options) {
        // 此處獲取裝置的寬高。canvas繪製的圖片以次寬高為準
        var _this = this;
        wx.getSystemInfo({
            success: function(res) {
                console.log(res)
                _this.setData({
                    windowW: res.windowWidth ,
                    windowH: res.screenHeight,
                   
                })
            },
        })
        
        // wx.downloadFile({
        //     url: 網路圖片地址必須要在小程式中配備合法域名,
        //     success: function (res1) {
        //         console.log(res1.tempFilePath)
        //         //快取商品圖片
        //         _this.setData({
        //             img1: res2.tempFilePath
        //         })
        //     }
        // })
        // wx.downloadFile({
        //     url: 網路圖片地址必須要在小程式中配備合法域名,
        //     success: function (res1) {
        //         console.log(res1.tempFilePath)
        //         //快取二維碼圖片
        //         _this.setData({
        //             img2: res2.tempFilePath
        //         })
        //     }
        // })
    },
    onReady: function() {
        // 頁面渲染完成
        this.createNewImg();
        //建立初始化圖片

    },

    //將金額繪製到canvas的固定
    setMoney: function(context) {
        var money ='￥29.9'
        context.setFontSize(24);
        context.setFillStyle("red");
        context.fillText(money, 40, 360);
        context.stroke();
    },
    //將說明繪製到canvas固定
    setSuoming :function(context){
        var Suoming="長按識別小程式碼訪問"
        context.setFontSize(18);
        context.setFillStyle("#484a3d");
        context.fillText(Suoming, 15, 460);
        context.stroke();
    },
    //將說明2繪製到canvas固定
    setSuoming1: function (context) {
        var Suoming = "子謙出品"
        context.setFontSize(18);
        context.setFillStyle("#484a3d");
        context.fillText(Suoming, 50, 510);
        context.stroke();
    },
    
    //將標題繪製到canvas的固定
    setName: function(context) {
        var name = "ONLY2018夏季新款蕾絲短袖連衣裙"
        context.setFontSize(15);
        context.setFillStyle("#67695b");
        context.fillText(name, 40, 320);
        context.stroke();
    },
    //將canvas轉換為圖片儲存到本地，然後將圖片路徑傳給image圖片的src
    createNewImg: function() {
        var _this = this;
        var context = wx.createCanvasContext("mycanvas");
        context.setFillStyle('#FFF')
        console.log(this.data.windowW, this.data.windowH)
        context.fillRect(0, 0, this.data.windowW, this.data.windowH)
        var path = "這裡放你的本地圖片路徑，或者網路圖片快取在本地的路徑";  //詳細看onLoad函式註釋部分
        context.drawImage(path, 30, 20, 300, 250);  //這裡是商品圖片
        this.setSuoming(context);
        this.setName(context);
        this.setMoney(context);
        this.setSuoming1(context);
        context.drawImage(path, 205, 430, 150, 150);//這裡是二維碼圖片
        context.draw(_this.getImg())

    },
    //將生成好的圖片儲存到本地  下面這句註釋是文件中的原話。
    // tip: 在 draw 回撥裡呼叫canvasToTempFilePath方法才能保證圖片匯出成功。
    getImg() {
        var _this = this;
        wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function success(res) {
                _this.setData({
                    imagePath: res.tempFilePath,
                });
            }
        });
    },
    //點選圖片進行預覽，長按儲存分享圖片
    previewImg: function(e) {
        var img = this.data.imagePath
        wx.previewImage({
            current:img, // 當前顯示圖片的http連結
            urls: [img] // 需要預覽的圖片http連結列表
        })
    },
    gotoSubmit: function(e) {
        var _this=this
        this.setData({
            maskHidden:false,
            showhaibao:true
        })
        wx.showToast({
            title: '圖片生成中...',
            icon: 'loading',
            duration: 2000
        });
        setTimeout(function() {
            wx.hideToast()
            _this.createNewImg();
        }, 2000)

    }

})
 

以上就是canvas繪製商品海報的全部程式碼。希望能幫助到大家 ，有不懂的或者更好的方法，歡迎大家留言或者提問