您的位置：首页 > Web前端 > HTML5

html5：<canvas>标签实现动态效果

2016-02-28 10:34 886 查看

<!DOCTYPE html >

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 canvas 标签

相关文章推荐

新的分享

章节导航