<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="index.css">-->
<script src="swiper/jquery-1.10.1.min.js"></script>
<style>
*{margin:0; padding:0;}
.box{width:200px; height:200px; background:gray; border-radius: 50%; text-align:center; line-height: 200px; position:absolute; left:0;}
div{width:300px; height:300px;}
img{margin-left:100px; margin-top:100px;}
.pro{width:0; height:30px; background:blue; transition:width 5s;}
/*.pro:hover{width:500px;}*/
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="box"></div>
<!--<button id="btn">点击旋转</button>-->
<!--<div class="box">Hello World!</div>-->
<!--<div class="pro"></div>-->
<script>
$(document).ready(function(){
//过渡，进度条
// $(".pro").css("width","500px");
//旋转移动
// var i=0;
// var t=setInterval(function () {
// i++;
// if(i<window.innerWidth/40){
// $(".box").css({transform:"rotateZ("+i*45+"deg)",left:i*20+"px"});
// } else{
// clearInterval(t);
// console.log(i);
// }
// },300);
//饼图百分比填充
var canvas=document.getElementById("canvas");
canvas.width=500;
canvas.height=500;
canvas.style.background="gray";
var ctx=canvas.getContext('2d');
var i=0;
var t=setInterval(function () {
if(i<36){
ctx.beginPath();
ctx.moveTo(250,250);
ctx.arc(250,250,200,0,(i+1)/36*Math.PI,false);
ctx.closePath();
i++;
$("#box").html(parseInt(i*100/72)+"%");
ctx.fillStyle="red";
ctx.fill();
}else{
clearInterval(t);
}
},50)
});
</script>
</body>
</html>
