直播網站原始碼,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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Android閃屏頁圓形倒數計時進度條實現Android
- 直播小程式原始碼,vue實現時間倒數計時原始碼Vue
- canvas環形倒數計時Canvas
- 直播系統原始碼,實現倒數計時,定時任務原始碼
- Canvas環形倒數計時元件Canvas元件
- 線上直播系統原始碼,預設倒數計時,自定義輸入時間倒數計時原始碼
- 使用canvas繪製圓形進度條Canvas
- canvas的簡單圓形進度條Canvas
- js實現指定時間倒數計時JS
- canvas實現的圓形時鐘效果Canvas
- canvas圓形進度條註釋超全Canvas
- 視訊直播系統原始碼,倒數計時顯示,商品秒殺倒數計時原始碼
- Android自定義圓形進度條實現程式碼Android
- Flutter實現圓形波浪進度球【canvas+animation】FlutterCanvas
- Android自定義圓形進度條原始碼解析Android原始碼
- Vue canvas繪製圓形進度條動畫載入VueCanvas動畫
- app直播原始碼,驗證時實現獲取驗證碼並顯示倒數計時的功能APP原始碼
- canvas圓形時鐘效果Canvas
- 直播商城系統原始碼,環形進度條元件原始碼元件
- 直播電商原始碼,商品出售倒數計時的定時器效果原始碼定時器
- 直播平臺搭建原始碼,canvas 畫一條波浪線 進度條原始碼Canvas
- js倒數計時 實現傳送驗證碼倒數計時60sJS
- js實現驗證碼倒數計時JS
- Flutter 波浪圓形進度條Flutter
- 自定義圓形進度條
- SVG畫圓形進度條SVG
- 直播平臺搭建,計時和倒數計時功能的分別實現
- canvas環形進度條效果Canvas
- Flutter倒數計時/計時器的實現Flutter
- 手機直播原始碼,驗證碼自動讀秒倒數計時原始碼
- 直播商城系統原始碼,js製作倒數計時,天,小時,分,秒原始碼JS
- 直播網站原始碼,vue工具類,時間格式化網站原始碼Vue
- js實現活動倒數計時JS
- 直播原始碼網站,各類進度條的設定與調整原始碼網站
- canvas錐形漸變進度條Canvas
- 倒數計時指定時間之後實現頁面跳轉效果
- 簡單實現時間倒數計時與伺服器同步效果伺服器
- 直播系統app原始碼,自定義可以暫停的倒數計時APP原始碼