html5 canvas绘制圆形进度实例

html5 canvas绘制圆形进度实例

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);

//懒人建站

本文链接：html5 canvas绘制圆形进度实例

html5 canvas绘制圆形进度实例由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

(责任编辑：懒人建站)

上一篇：没有了

下一篇：移动端web开发技巧与经验分享

html5 canvas绘制圆形进度实例-相关文章

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）