canvas实现黑色仪表盘加载进度动画效果代码

代码语言:html

所属分类:进度条

代码描述:canvas实现黑色仪表盘加载进度动画效果代码

代码标签: canvas 黑色 仪表盘 加载 进度 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
       
<head>
               
<meta charset="UTF-8">

               
<style type="text/css">
                html
,body{
                       
background: black;
               
}
                       
*{
                               
margin: 0;
                               
padding: 0;
                               
border: 0;
                       
}
                       
#can{
                               
margin: 0 auto;
                               
margin-top:200px;
                               
display: block;
                       
}
               
</style>
       
</head>
       
<body>
               
               
               
<canvas id="can" width="586" height="520"></canvas>
               
               
<script type="text/javascript">
                        var c = document.getElementById("can");
                        var ctx =  document.getElementById("can").getContext('2d');
           
           
           
            var k = 0;
            var timer = setInterval(function(){
                k++;
                if(k==100){
                        clearInterval(timer);
                }
                                fillImage(k);
            },80)

           
            //绘制图片
            func.........完整代码请登录后点击上方下载按钮下载查看

网友评论0