騰訊 IVWEB 團隊 :Canvas 實現 progress 效果

騰訊雲加社群發表於2017-05-02
WebCanvas

騰訊雲技術社群-掘金主頁持續為大家呈現雲端計算技術文章，歡迎大家關注！

作者：樑偉盛

據說本貴族圈每月不分享就邀請雪糕。。。所以分享下一個簡單的Canvas外掛
　　Canvas元素是HTML5的一部分，允許指令碼語言動態渲染點陣圖像，你可以使用javascript用它來繪製圖形、圖示、以及其它任何視覺性影象。它也可用於建立圖片特效和動畫。（反正就是好東西）
　　既然是HTML5的特性，那必須是隻有支援HTML5的瀏覽器才能使用，相容性如下圖：

騰訊 IVWEB 團隊 :Canvas 實現 progress 效果

使用到的API

參考資料~W3School

beginPath

定義：開始一條路徑，或重置當前的路徑。

      context.beginPath();複製程式碼

arc

定義：建立弧/曲線（用於建立圓或部分圓）。

      context.arc(x, y , r, sAngle, eAngle, counterclockwise);複製程式碼
引數
  • x：圓的中心的 x 座標。
  • y：圓的中心的 y 座標。
  • r：圓的半徑。
  • sAngle：起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
  • eAngle：結束角，以弧度計。
  • counterclockwise：可選。規定應該逆時針還是順時針繪圖。false = 順時針，true = 逆時針。

stroke

定義：繪製當前路徑的邊框

    context.stroke()複製程式碼

measureText

    context.measureText(text).width;複製程式碼

定義：返回包含一個物件，該物件包含以畫素計的指定字型寬度。

引數
  • text：要測量的文字

fillText

定義：在畫布上繪製填色的文字

    context.fillText(text, x, y, maxWidth);複製程式碼
引數
  • text：規定在畫布上輸出的文字。
  • x：開始繪製文字的 x 座標位置（相對於畫布）。
  • y：開始繪製文字的 y 座標位置（相對於畫布）。
  • maxWidth：可選。允許的最大文字寬度，以畫素計。

clearRect

定義：清空給定矩形內的指定畫素。

    context.clearRect(x, y, width, height);複製程式碼
引數
  • x：要清除的矩形左上角的 x 座標
  • y：要清除的矩形左上角的 y 座標
  • width：要清除的矩形的寬度，以畫素計
  • height：要清除的矩形的高度，以畫素計

實現思路

　　瞭解了以上API後，我們就可以動手幹活了，其實很簡單。實現只有3個步驟。

1，畫出帶有透明度的內圓
    context.beginPath();

    //設定透明度，樣式與線條寬度
    this.extend(context, {
        globalAlpha: inSideCircle.alpha,
        strokeStyle: inSideCircle.style,
        lineWidth: inSideCircle.lineWidth
    })            

    //繪製圓
    context.arc(this.hElWidth, this.hElHeight, option.radius + outSideCircle.lineWidth - inSideCircle.lineWidth, 0, pi * 2, false);

    //畫出圓形
    context.stroke();複製程式碼
2，根據進度畫出外圓
    context.beginPath();

    //設定透明度，樣式與線條寬度
    this.extend(context, {
        globalAlpha: outSideCircle.alpha,
        strokeStyle: outSideCircle.style,
        lineWidth: outSideCircle.lineWidth
    })                            

    //根據當前進度繪製圓
    context.arc(this.hElWidth, this.hElHeight, option.radius, -(pi / 2), pi * 2 / 100 * (n - 25), false);

    //畫出圓形
    context.stroke();複製程式碼
3，根據進度畫出數值(0-100%)
    context.beginPath();

    this.extend(context, {
        font: textObj.font,
        fillStyle: textObj.style,
        globalAlpha: textObj.alpha
    })            

    //得出數值寬度
    numberWidth = context.measureText(number).width;

    context.fillText(number, this.hElWidth - numberWidth / 2, this.hElHeight + 10 / 3)複製程式碼

#####最後暴露出setProgress設定進度函式給外部呼叫即可

    //清除canvas內容
    this.context.clearRect(0, 0, this.elWidth, this.elHeight);                            

    this._drawCircle(n);

    this._drawText(n);複製程式碼

測試用例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
        <meta content="yes"name="apple-mobile-web-app-capable"/>
        <meta content="black"name="apple-mobile-web-app-status-bar-style"/>
        <meta name="format-detection"content="telphone=no"/>
        <title>canvasProgress</title>
    </head>
    <body>    
    <canvas id="canvasEl" style="background-color:#000" height="100px" width="100px"></canvas>
    </body>
    <script type="text/javascript" src="progress.js"></script>
    <script type="text/javascript">
        var progress = new Progress({element: document.getElementById('canvasEl')})

        var n = 0;

        var timer = setInterval(function() {
            if (n++ !== 100) {
                progress.setProgress(n);        
            } else {
                clearInterval(timer);
            }
        }, 100)

    </script>
    </html>複製程式碼

實現效果

背景與進度顏色根據喜好變換

騰訊 IVWEB 團隊 :Canvas 實現 progress 效果
騰訊 IVWEB 團隊 :Canvas 實現 progress 效果
騰訊 IVWEB 團隊 :Canvas 實現 progress 效果

最後

今天分享就到此位置了，有興趣的可以去github看下程式碼。

原文連結：ivweb.io/topic/559f2…

相關推薦
講講標準的Promise長啥樣？
玩轉JavaScript正規表示式
騰訊儲存與CDN免費體驗

此文已由作者授權騰訊雲技術社群釋出，轉載請註明文章出處
原文連結
獲取更多騰訊海量技術實踐乾貨，歡迎大家前往騰訊雲技術社群

相關文章