canvas的进度条,适合首页,简单实用,效果炫酷

题外话

      老板忽然让做一个首页,需要一个进度条,于是随手写了一个.
      原理是用for循环循环不规则的粒子进行不规则的靠后移动,感觉这种乱中有序的粒子排序效果非常不错
      本人最近也遇到头疼的问题,老板让写一个幕布拉开的特效,要求3d逼真,有想法的可以帮帮我,一筹莫展,不会写风速的算法,以及拉动元素的力的算法.也不知道canvas用哪个框架好.

canvas进度条

html:

<div id="popoue_u3d">
        <div class="u_progress">
            <canvas id="getIntoCanvas"></canvas>
            <h4>已加载<span id="orderBF">0%</span></h4>
            <link rel="stylesheet" type="text/css" href="./allText.css">
        </div>
    </div>

js(无需引入任何插件):

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
var oSpan = document.getElementById("orderBF");
var myCanvas = document.getElementById("getIntoCanvas");
var ctx = myCanvas.getContext("2d");
var myW = 950,
myH = 75;
var width = 0;
var pics = [];
var bF = 900;
myCanvas.width = myW;
myCanvas.height = myH;
ctx.fillStyle = "#171814";
ctx.fillRect(25, 25, 800, 25);
function SetPic() {
    this.x = width + Math.round(Math.random() * 50);
    this.y = 37.5;
    this.up = Math.random();
    this.width = Math.round(Math.random() * 9) - 4;
    this.height = Math.round(Math.random() * 5) - 3;
    this.draw = function() {
        ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}
function reset() {
    ctx.fillStyle = "rgba(255,255,255,0)";
    ctx.clearRect(0, 0, myW, myW);
}
function update() {
    width += 3;
    bF = Math.floor((width / 900) * 100);
    oSpan.innerHTML = bF + "%";
    if (bF == 100) {
        eleHide();
    }
    fillRoundRect(ctx, 25, 25, 900, 20, 10, '#FBA7A7');
    fillRoundRect(ctx, 25, 25, width, 20, 10, '#FA4141');
    if (pics.length > 300) {
        pics.splice(0, 1)
    }
    pics.push(new SetPic());
}
function draw() {
    reset();
    update();
    if (width >= 900) {
        width = 900;
        if (Math.random() < 0.2) {
            pics.splice(0, 1);
        }
    } else {
        for (var i = 0; i < pics.length; i++) {
            var p = pics[i];
            if (p.up > 0.5) {
                p.y += Math.random();
            } else {
                p.y -= Math.random();
            }
            if (Math.random() < 0.5) {
                p.x += Math.random();
            } else {
                p.x -= Math.random();
            }
            p.draw();
        }
    }
}
function animloop() {
    draw();
    requestAnimFrame(animloop);
}
animloop();
// 下面为兼容圆角函数
function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
    if (2 * radius > width || 2 * radius > height) {
        return false;
    }
    cxt.save();
    cxt.translate(x, y);
    drawRoundRectPath(cxt, width, height, radius);
    cxt.fillStyle = fillColor || "#000";
    cxt.fill();
    cxt.restore();
}
function strokeRoundRect(cxt, x, y, width, height, radius, lineWidth, strokeColor) {
    if (2 * radius > width || 2 * radius > height) {
        return false;
    }
    cxt.save();
    cxt.translate(x, y);
    drawRoundRectPath(cxt, width, height, radius);
    cxt.lineWidth = lineWidth || 2;
    cxt.strokeStyle = strokeColor || "#000";
    cxt.stroke();
    cxt.restore();
}
function drawRoundRectPath(cxt, width, height, radius) {
    cxt.beginPath(0);
    cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    cxt.lineTo(radius, height);
    cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    cxt.lineTo(0, radius);
    cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
    cxt.lineTo(width - radius, 0);
    cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
    cxt.lineTo(width, height - radius);
    cxt.closePath();
}
// 进度条加载完之后执行的
function eleHide() {
    document.getElementById("popoue_u3d").style.display = "none";
}