小程序坑-canvas

canvas中單位問題

在canvas中繪製的單位都是px，但因爲不一樣屏幕的像素比不一樣，在小程序中樣式咱們使用的單位是rpx，因此在canvas中就須要把rpx換成對應的px；因爲rpx能夠根據屏幕寬度進行自適應，規定屏幕寬爲750rpx，因此rpx換算成px的公式是：
1rpx = 屏幕寬度 / 750
這一點在小程序的官方文檔也有講到：https://mp.weixin.qq.com/debu...
屏幕寬度能夠使用wx.getSystemInfoSync();獲取；
因此例如在樣式中你的canvas寬度650rpx，那麼在canvas中繪製使用的寬度就是：（屏幕寬度 / 750）* 650 ;

如何在canvas上彈窗

因爲canvas組件是小程序建立的原生組件，它的層級是最高的，其餘不是原生的組件都無法蓋住它，但有些使用咱們要必須在上面彈窗，那這時怎麼辦呢？？？

解決辦法：

在彈窗時將canvas轉換成圖片並隱藏，使用image標籤代替canvas，這樣彈窗就能夠蓋在上面啦！！！
使用wx.canvasToTempFilePath將canvas臨時轉爲圖片（https://mp.weixin.qq.com/debu...）
這裏要注意一個問題，參數中的width、height等等單位都是px，須要使用上面將的方式轉換。

如何劃一條流暢的曲線

修改以前
修改以後
若是咱們像將一條折線變得流暢應該怎麼作呢？
這裏涉及到1. 頭尾的圓滑 2. 折線處的平順；

1. 頭尾的圓滑：ctx.setLineCap('round')
2. 折線處的平順：ctx.setLineJoin('round')
   兩個api的文檔說明：

https://mp.weixin.qq.com/debu...
https://mp.weixin.qq.com/debu...

如何劃虛線

因爲小程序劃虛線的API須要基礎庫1.6.0纔開始支持，因此須要本身實現

/**
     * 
     * @param {*} context canvas上下文
     * @param {*} x1 起點x
     * @param {*} y1 起點y
     * @param {*} x2 終點x
     * @param {*} y2 終點y
     * @param {*} dashLen 虛線每段的長度 
     */
    drawDashLine(context, x1, y1, x2, y2, dashLen) {  
        const getBeveling = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        dashLen = dashLen === undefined ? 5 : dashLen;  
        //獲得斜邊的總長度  
        var beveling = getBeveling(x2-x1,y2-y1);  
        //計算有多少個線段  
        var num = Math.floor(beveling/dashLen);  
          
        for(var i = 0 ; i < num; i++)  
        {  
            context[i%2 == 0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);  
        }  
        context.stroke();  
    },