html5 canvas绘制圆形进度实例

代码语言：javascript复制

html5 canvas绘制圆形进度实例
<canvas id="test" width=200 height=200></canvas>
<script>

var canvas2d = document.getElementById("test").getContext("2d");

var deg = 0;

var test = function(deg){

    var r = deg*Math.PI/180;   //canvas绘制圆形进度

    canvas2d.clearRect(0,0,200,200);   //先清理

    canvas2d.beginPath();  //路径开始

    //canvas2d.fillStyle = "#fff"; //填充颜色

    canvas2d.strokeStyle = "#dddddd"; //canvas边框颜色

    canvas2d.lineWidth = 6; //线宽

    canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false); //canvas绘制弧形

    //canvas2d.fill();

    canvas2d.stroke();

    //canvas2d.closePath();

};

//使用定时器让html5 canvas绘制圆形进度动起来

var t = setInterval(function(){

    deg =10;

    test(deg);

    if(deg>360){

        clearInterval(t);

    }

    console.log(deg);

},20);



</pre> 

html5 canvas

0 人点赞