直播網站原始碼，Canvas實現圓形時間倒數計時進度條

zhibo系統開發發表於2023-11-02
網站原始碼Canvas

直播網站原始碼，Canvas實現圓形時間倒數計時進度條

在開發canvas程式時，我們通常需要準備靜態html和需要引用的js檔案即可，這次我們使用的靜態html模板如下：

1.html頁面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> -->
    <title>圓形倒數計時</title>
  </head>
  <body>
    <div style="width: 800px;height: 700px">
        <canvas id="canvas" width="800" height="700"></canvas>
      </div>
  </body>
  <script src="./index.js"></script>
</html>


2.js檔案-需要操作canvas標籤的程式碼

我們先定義好需要去實現的方法，分別如下面程式碼

function CircleClock(canvas) {
  // 定義一個CircleClock建構函式，用於初始化 
}
CircleClock.prototype.setProgress = function (progress) {
    // 用於設定從外部設定進度
};
CircleClock.prototype.getProgress = function () {
    // 用於獲取進度
};
CircleClock.prototype.drawBackgroundCircle = function () {
    // 畫圓形的背景環形條
};
CircleClock.prototype.drawCurrentProgressCircle = function () {
  // 繪製倒數計時環形進度條
};
CircleClock.prototype.createLinearGradientByTime = function () {
    // 按照進度，計算漸變色
};
CircleClock.prototype.drawTimeText = function () {
    // 繪製環中間文字倒數計時
};
CircleClock.prototype.clear = function () {
    // 清理canvas
};
CircleClock.prototype.setTime = function (seconds) {
    // 設定初始時間，需要倒數計時的時間
};
CircleClock.prototype.setCurrentTime = function (currentSeconds) {
    // 實時同步當前剩下的時間
};
CircleClock.prototype.run = function (seconds, endCallback) {
    // 開始執行專案，執行時傳入初始時間和回撥函式
};
CircleClock.prototype.update = function (unPass) {
  this.setCurrentTime(unPass);
  this.clear();
  this.drawBackgroundCircle();
  this.drawCurrentProgressCircle();
  this.drawTimeText();
};
const circleClock = new CircleClock("canvas");
circleClock.run(30, () => {
  console.log("倒數計時執行完畢");
});


 以上就是 直播網站原始碼，Canvas實現圓形時間倒數計時進度條，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2992529/，如需轉載，請註明出處，否則將追究法律責任。

相關文章