canvas 加载中动画

Html

Css

body {
	margin:0;
	padding:0;
}
canvas {
	display:block;
}

$(function() {
    var deg1 = 0;
    var index = 1;
    var opa = 1;
    var flag = true;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var PI = Math.PI;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // ctx.translate(centerX,centerY);
    function arc() {
        ctx.fillStyle = 'rgba(255,255,255,.8)';
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.strokeStyle = 'rgba(48,128,236,1)';
        ctx.lineWidth = 5;
        // 过渡
        ctx.arc(centerX, centerY, 100, PI * 3 / 2, deg1 * PI / 180 + PI * 3 / 2);
        if (deg1 < 360) {
            if (deg1 < 180) {
                index *= 1.08;
            } else {
                index /= 1.08;
            }
            deg1 += index;
        }
        if (deg1 >= 360) {
            deg1 = 0;
        }
        ctx.stroke();
        ctx.beginPath();
        if (flag) {
            opa -= 0.02;
            if (opa < 0.2) {
                flag = false;
            }
        } else {
            opa += 0.02;
            if (opa > 1) {
                flag = true;
            }
        }
        ctx.font = "Bold 20px Arial";
        ctx.textAlign = "center";
        ctx.fillStyle = "rgba(48,128,236," + opa + ")";
        ctx.fillText("loading...", centerX, centerY + 5);
        window.requestAnimationFrame(arc);
    }
    window.requestAnimationFrame(arc);
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.10.2

立即下载

canvas 加载中动画



代码描述：canvas 加载中动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

相关代码

canvas 加载中动画

最新