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

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

代码语言：html

所属分类：进度条

代码描述：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)

            
            //绘制图片
            function fillImage(k){
            	var img = new Image();
	            img.src = '//repo.bfw.wiki/bfwrepo/icon/62bc38714d331.png';
	            img.onload = function(){
					c.height = c.height;
					ctx.drawImage(img,18,14);
					fillArrows(k);
					fillFont(k);
					fillRing(k)
	            }
            }
            
            //绘制箭头
            function fillArrows(k){
            }
            
            
            function fillArrows(k){
          .........完整代码请登录后点击上方下载按钮下载查看