溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript如何實現帶粒子效果的進度條”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript如何實現帶粒子效果的進度條”吧！
具體代碼如下
<html>
<head>
<meta charset="utf8"/>
<!--
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, maximum-scale=1" />
-->
<title>粒子效果實戰</title>
<style type="text/css">
body {
background:#111;
}
#canvas {
background:transparent;
border:1px dashed #171717;
margin:-151px 0 0 -401px;
position:absolute;
left:50%;
top:50%;
}
</style>
</head>
<body onload="init()">
<canvas id="canvas" width="800px" height="300px">瀏覽器不支持canvas</canvas>
<script type="text/javascript">
//判斷是否支持canvaas
function isSupportCanvas(canvas) {
return !!(canvas.getContext && canvas.getContext("2d"));
}
//requestAnimationFrame會自動使用最優的幀率進行渲染
function setupRAF() {
window.lastTime = 0;
//兼容各個瀏覽器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
var vendors = ["ms", "moz", "webkit", "o"];
for(var i=0; i<vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"];
//測試瀏覽器支持哪一張
if(window.requestAnimationFrame) {
console.log(vendors[i] + "requestAnimationFrame");
}
if(window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame");
}
if(window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame");
}
}
//回退機制
if(!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16-(currentTime-window.lastTime));
var callTime = currentTime + timeToCall;
var id = window.setTimeout(function() {
callback(callTime);
}, timeToCall);
window.lastTime = callTime;
return id;
};
}
//回退機制
if(!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}
//在[min, max]中隨機取一個數
function rand(min, max) {
return Math.random() * (max - min + 1) + min;
}
//判斷兩碰撞盒是否相交
function isHit(x1, y1, w1, h2, x2, y2, w2, h3) {
return !( x1 + w1 < x2 || x2 + w2 < x1 || y1 + h2 < h3 || y2 + h3 < h2);
}
//判斷點是否在指定區域內
function isInRect(x, y, rx, ry, rw, rh) {
return !(x < rx || x > rx + rw || y < ry || y > ry + rh);
}
//將數限制在某個范圍之內
function limit(value, min, max) {
if(value < min) {
return min;
} else if(value > max) {
return max;
}
return value;
}
var CanvasController = function(canvas) {
var ctx = canvas.getContext("2d");
//進度條對象
var Loader = function() {
//進度條寬度
this.width = canvas.width - 80;
//進度條高度
this.height = 20;
//進度條X坐標
this.x = (canvas.width - this.width) / 2;
//進度條Y坐標
this.y = (canvas.height - this.height) / 2;
//進度條當前值
this.value = 0;
//進度條最大值
this.maxValue = 100;
//進度條更新速度
this.speed = .5;
//加深的顏色
this.lighterColor = "#222";
//HSL(Hue:色相，Saturation:飽和度，Lightness：飽和度)
this.hue = 0;
this.hueStart = 0;
this.hueEnd = 360;
//獲取當前值對應的X坐標
this.currentPosX = function() {
return this.x + this.width * this.value / 100;
}
//更新進度條
this.update = function() {
this.value += this.speed;
if(this.value > this.maxValue) {
this.value = 0;
}
}
//渲染進度條
this.render = function() {
ctx.globalCompositeOperation = "source-over";
var currentWidth = this.width * this.value / 100;
this.hue = this.hueStart + (this.hueEnd - this.hueStart) * this.value / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x + currentWidth, this.y);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height/2);
}
}
//單個粒子對象
var Particle = function(x, y, hue, minX, maxX) {
//粒子的X坐標
this.x = x;
//粒子的Y坐標
this.y = y;
//粒子的寬度
this.width = rand(1,3);
//粒子的高度
this.height = rand(1,2);
//粒子的HSL顏色的hue分量
this.hue = limit(hue + rand(-15,15), 0, 360);
//粒子在X方向上的速度
this.velocityX = rand(-1,1);
//粒子在Y方向上的速度
this.velocityY = rand(-30,-20);
//粒子在X方向上的加速度
this.accelerationX = -.5;
//粒子在Y方向上的加速度
this.accelerationY = 4;
//單位時間
this.unitTime = .2;
//更新粒子位置
this.update = function() {
this.x += (this.velocityX * this.unitTime);
this.y += (this.velocityY * this.unitTime);
this.velocityX += (this.accelerationX * this.unitTime * rand(-1,1));
this.velocityY += (this.accelerationY * this.unitTime);
}
//渲染粒子
this.render = function() {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)"
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//所有粒子效果的對象
var Particles = function(minX, maxX) {
//存放生成的所有粒子對象
this.values = [];
//粒子生成速率
this.rate = 3;
//生成粒子
this.generate = function(x, y, hue) {
for(var i=0; i<this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX));
}
}
//更新進度值
this.update = function() {
for(var i = this.values.length-1; i >= 0; i--) {
this.values[i].update();
if(!isInRect(this.values[i].x, this.values[i].y, 0, 0, canvas.width, canvas.height)) {
this.values.splice(i, 1);
}
}
}
//渲染進度條
this.render = function() {
for(var i =0; i<this.values.length; i++) {
this.values[i].render();
}
}
}
//清空畫布
function clearCanvas() {
//默認值，表示圖形將繪制在現有畫布之上
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//初始化函數
this.init = function() {
var loader = new Loader();
var particles = new Particles(loader.x, loader.x + loader.width);
var loop = function() {
requestAnimationFrame(loop, canvas);
clearCanvas();
loader.update();
loader.render();
particles.generate(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue);
particles.update();
particles.render();
}
loop();
}
}
function init() {
var canvas = document.getElementById("canvas");
if(!isSupportCanvas(canvas)) {
return;
}
setupRAF();
var canvasController = new CanvasController(canvas);
canvasController.init();
}
</script>
</body>
</html>
感謝各位的閱讀，以上就是“JavaScript如何實現帶粒子效果的進度條”的內容了，經過本文的學習后，相信大家對JavaScript如何實現帶粒子效果的進度條這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
