canvas画一个简单的太阳系
时间: 2023-07-30 16:09:04 浏览: 58
好的,我可以为您展示一个使用Canvas绘制简单太阳系的示例代码。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas 太阳系</title>
<style>
canvas {
background-color: black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script src="solar-system.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//太阳
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(400, 300, 30, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//地球
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(400, 200, 10, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//月球
ctx.beginPath();
ctx.fillStyle = "gray";
ctx.arc(400, 170, 3, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//火星
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(300, 300, 8, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//水星
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(200, 300, 6, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//金星
ctx.beginPath();
ctx.fillStyle = "green";
ctx.arc(500, 300, 7, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//木星
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(600, 300, 20, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//土星
ctx.beginPath();
ctx.fillStyle = "brown";
ctx.arc(700, 300, 18, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//天王星
ctx.beginPath();
ctx.fillStyle = "lightblue";
ctx.arc(500, 500, 15, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//海王星
ctx.beginPath();
ctx.fillStyle = "darkblue";
ctx.arc(200, 500, 14, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//绘制太阳系的连线
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.moveTo(400, 300);
ctx.lineTo(400, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 300);
ctx.lineTo(500, 300);
ctx.lineTo(600, 300);
ctx.lineTo(700, 300);
ctx.lineTo(500, 500);
ctx.lineTo(200, 500);
ctx.stroke();
ctx.closePath();
```
这个示例代码会在Canvas中绘制出一个简单的太阳系,包括太阳、地球、月球、火星、水星、金星、木星、土星、天王星和海王星,并连接它们的轨道。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)