溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用html5制作loading圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
代碼如下：
<！DOCTYPE html>
<html>
<head>
<title> </ title>
</ head>
<body>
<canvas id =“ canvas”> </ canvas> </ p> <p> <script>
var Loading =功能（畫布，選項）{
this.canvas = document.getElementById（canvas）;
this.options =選項;
}; </ p> <p> Loading.prototype = {
構造函數：正在加載，
顯示：function（）{
var canvas = this.canvas，
begin = this.options.begin，
old = this.options.old，
lineWidth = this .options.lineWidth，
canvasCenter = {x：canvas.width / 2，y：canvas.height / 2}，
ctx = canvas.getContext（“ 2d”），
color = this.options.color，
num = this.options.num，
angle = 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 <num; i + = 1）{
ctx.beginPath（）;
ctx.strokeStyle = color [num-1-i];
ctx.lineWidth = 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 + angle）*舊，canvasCenter.y + Math.sin（CONST_PI * i + angle）* old）;
ctx.stroke（）;
ctx.closePath（）;
}
angle + = CONST_PI;
console.log（angle）
}，50）;
}，
hide：function（）{
clearInterval（window.timer）;
}
}; </ p> <p>（函數（）{
var options = {
num：8，
begin：20，
old：40，
lineWidth：10，
lineCap：“ round”，
顏色：[“ 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（）;
}（））;
</ script>
</ body>
</ html>
以上是“如何使用html5制作loading圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
