css3进度圆

Html

Css

.box {
	height:400px;
	margin:auto;
}

window.onload = function() {
    var context = document.getElementById("canvas").getContext("2d");

function draw(startingAngel, endtingAngel, progress) {

//圆形
        context.beginPath();
        context.arc(400, 300, 75, 0, 2 * Math.PI, false);
        context.lineWidth = "5";
        context.strokeStyle = "aqua";
        context.fillStyle = "aqua";
        context.fill();
        context.stroke();
        context.closePath();

//写文字的圆形
        context.beginPath();
        context.arc(400, 300, 40, 0, 2 * Math.PI, false);
        context.strokeStyle = "paleturquoise";
        context.fillStyle = "paleturquoise";
        context.fill();
        context.stroke();
        context.closePath();

//填充文字
        context.font = "35px 华文行楷";
        context.fillStyle = "white";
        context.fillText(progress + "%", 375, 310);

//进度圆	
        context.beginPath();
        context.arc(400, 300, 80, startingAngel, endtingAngel, false);
        context.lineWidth = "10";
        context.lineCap = "round";
        context.strokeStyle = "lawngreen";
        context.stroke();
        context.closePath();

}
    var NowAngel = 0;
    endtingAngel = 0;
    progress = 0;
    var Myshow;
    Myshow = window.setInterval(function() {
        endtingAngel += 0.02 * Math.PI;
        progress++;
        if (progress >= 95) {
            clearInterval(Myshow);
        }
        draw(NowAngel, endtingAngel, progress);

}, 10);
}

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

立即下载

css3进度圆



代码描述：css3+canvas绘制进度圆

canvas绘制进度圆

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

37°是体温

相关代码

css3进度圆

最新