html5:標籤實現動態效果


<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8"/>
  <link href="" type="text/css" rel="stylesheet"/>
 </head>


 <body>
<canvas id='canvas' width='600px'height='600px'style='background:orange'></canvas>
<script>
var canvas =document.getElementById('canvas');
var context=canvas.getContext('2d');
var x=-300;
//八卦
context.translate(canvas.width/2,canvas.height/2);
setInterval(function(){
context.rotate(Math.PI/180*1);
context.clearRect(-canvas.width/2,-canvas.height/2,canvas.width,canvas.height);
context.beginPath();
context.arc(300+x,300+x,100,Math.PI/2,Math.PI*3/2);
context.fillStyle='#000';
context.fill();


context.beginPath();
context.arc(300+x,350+x,50,0,Math.PI*2);
context.fillStyle='#fff';
context.fill();

context.beginPath();
context.arc(300+x,300+x,100,Math.PI/2,Math.PI*3/2,true);
context.fill();


context.beginPath();
context.arc(300+x,250+x,50,0,Math.PI*2);
context.fillStyle='#000';
context.fill();


context.beginPath();
context.arc(300+x,350+x,20,0,Math.PI*2);
context.fillStyle='#000';
context.fill();


context.beginPath();
context.arc(300+x,250+x,20,0,Math.PI*2);
context.fillStyle='#fff';
context.fill();
},1);
</script>
 </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章