首頁 web前端 H5教程 使用html5製作loading圖表的範例_html5教學技巧

使用html5製作loading圖表的範例_html5教學技巧

May 16, 2016 pm 03:48 PM
html5


複製程式碼
程式碼如下:









<script><br /> var Loading = function (canvas, options) {<br /> this.canvas = document.getElementById(canvas);<br /> this.options = options;<br /> };</script>

}; >

Loading.prototype = {
建構子: Loading,
show: function () {
var canvas = this.canvas,
begin = this.options.begin,
old🎜> old = this.options .old,
lineWidth = this.options.lineWidth,
canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},
ctx = canvas. "2d") ,
color = this.options.color,
num = this.options.num,
角度= 0,
lineCap = this.options.lineCap,
CONST_PI = Math.PI * (360 / num) / 180;
window.timer = setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for ( var i = 0 ; i ctx.beginPath();
ctx.行程風格= 顏色[num - 1 - i];
ctx.lineWidth = 線寬度;
ctx.lineCap= lineCap;
ctx.moveTo(canvasCenter.x Math.cos(CONST_PI * i 角度) * 開始, canvasCenter.y Math.sin(CONST_PI * i 角度) * 開始);
ctx.lineTo(canvasCenter .x Math.cos(CONST_PI * i 角度) * 舊, canvasCenter.y Math.sin(CONST_PI * i 角度) * 舊);
ctx.lines();
ctx.closePath ();
}
angle = CONST_PI;
console.log(angle)
},50);
},
hide: function () {
clearInterval(視窗.計時器);
}
};

(function () {
var options = {
num : 8,
開始: 20,
舊: 40,
lineWidth: 10,
",
顏色: ["rgb(0, 0, 0)", "rgb(20, 20, 20)","rgb(40, 40, 40)", "rgb(60, 60, 60) "," rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"]
} ;
var loading = new Loading("canvas", options);
loading.show();
}());

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符

See all articles