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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.