郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > html5 教程 >

html5 canvas绘制圆形进度实例

来源:未知 作者: 博彩评级 日期:2015-03-17 人气:
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);

//博彩评级http://www.qqydc.com/
本文链接:html5 canvas绘制圆形进度实例http://www.qqydc.com/html5/canvas_progress.html

本文地址:http://www.qqydc.com/html5/canvas_progress.html
文章摘要:html5 canvas绘制圆形进度实例,西行灯笼枫林晚,清一色十分爱用刀。

html5 canvas绘制圆形进度实例由博彩评级收集整理,您可以自由传播,请主动带上本文链接

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

(责任编辑:博彩评级)