canvas简单模拟太阳地球月亮的转动

最新推荐文章于 2023-08-29 16:05:43 发布

中国星2014

最新推荐文章于 2023-08-29 16:05:43 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_28020627/article/details/75000485

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>这是一个测试文件</title>
<style type="text/css">
*{
margin:0;
padding: 0;
border: 0;

}
canvas{
background-color: #eee;
/*margin: 100px;*/
}
</style>
</head>
<body>

<div>
<canvas width="1000" height="600" id="can"></canvas>
</div>

<script type="text/javascript">

var cxt = document.getElementById("can").getContext("2d");
var width = document.getElementById("can").width;

var height = document.getElementById("can").height;

//初始化

cxt.strokeStyle ="#f00";
cxt.beginPath();
cxt.arc(200,200,70,0,Math.PI*2,false);
cxt.stroke();
cxt.translate(200,200);
cxt.rotate(Math.PI/12);
cxt.translate(150,0);
cxt.beginPath();
cxt.strokeStyle ="#f00";
cxt.arc(0,0,30,0,Math.PI*2,false);
cxt.stroke();
cxt.save();
cxt.translate(45,0);
cxt.beginPath();
cxt.arc(0,0,10,0,Math.PI*2,false);
cxt.stroke();
cxt.translate(-45,0);
cxt.restore();
cxt.translate(-150,0);

cxt.translate(-200,-200);

//初始化结束

var i = 0;
setInterval(function(cxt){

cxt.clearRect(0,0,width,height);
cxt.beginPath();
cxt.arc(200,200,70,0,Math.PI*2,false);
cxt.stroke();

cxt.translate(200,200);
cxt.rotate(Math.PI/12);
cxt.translate(150,0);
cxt.beginPath();
cxt.strokeStyle ="#f00";
cxt.arc(0,0,30,0,Math.PI*2,false);
cxt.stroke();

cxt.save();
cxt.rotate(Math.PI*i);

cxt.translate(45,0);

cxt.beginPath();

cxt.arc(0,0,10,0,Math.PI*2,false);
cxt.stroke();
cxt.translate(-45,0);
cxt.restore();

cxt.translate(-150,0);
cxt.translate(-200,-200);
i = i+0.175;

},400,cxt);

</script>
</body>
</html>