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

時間 2019-11-30

標籤騰訊 ivweb 團隊 canvas 實現 progress 效果欄目騰訊简体版

原文原文鏈接

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！javascript

做者：梁偉盛html

聽說本貴族圈每個月不分享就邀請雪糕。。。因此分享下一個簡單的Canvas插件
　　Canvas元素是HTML5的一部分，容許腳本語言動態渲染位圖像，你能夠使用javascript用它來繪製圖形、圖標、以及其它任何視覺性圖像。它也可用於建立圖片特效和動畫。（反正就是好東西）
　　既然是HTML5的特性，那必須是隻有支持HTML5的瀏覽器才能使用，兼容性以下圖：java

使用到的API

參考資料~W3Schoolgit

beginPath

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

context.beginPath();複製代碼

arc

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

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;複製代碼

定義：返回包含一個對象，該對象包含以像素計的指定字體寬度。canvas

參數

text：要測量的文本

fillText

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

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>複製代碼