用canvas画一个六芒星
时间: 2023-05-15 08:06:33 浏览: 122
以下是使用 HTML5 canvas 画一个六芒星的代码:
```html
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 80;
ctx.beginPath();
ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0));
for (let i = 1; i <= 6; i++) {
const angle = i * 2 * Math.PI / 6;
ctx.lineTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
}
ctx.closePath();
ctx.stroke();
</script>
```
这段代码会在一个 200x200 的 canvas 中画出一个六芒星。
相关问题
python 画一个六芒星
好的,可以使用 `turtle` 模块来实现在 Python 中画图形。下面是画一个六芒星的代码:
```python
import turtle
# 创建画布和画笔
canvas = turtle.Screen()
pen = turtle.Turtle()
# 画六芒星
pen.pensize(5)
pen.color("red")
for i in range(6):
pen.forward(200)
pen.backward(200)
pen.left(60)
pen.hideturtle()
# 关闭画布
canvas.exitonclick()
```
代码中我们首先导入了 `turtle` 模块,并创建了一个画布和一个画笔。然后,使用循环和 `forward()`、`backward()` 和 `left()` 方法画出了六芒星的形状。最后,调用 `hideturtle()` 方法来隐藏画笔,并调用 `exitonclick()` 方法来保持画布持续显示,直到用户点击画布才会关闭。
html画六芒星canvas
HTML中使用Canvas元素可以实现绘制六芒星的效。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>绘制六芒星</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制六芒星
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(120, 60);
ctx.lineTo(180, 70);
ctx.lineTo(140, 120);
ctx.lineTo(160, 180);
ctx.lineTo(100, 150);
ctx.lineTo(40, 180);
ctx.lineTo(60, 120);
ctx.lineTo(20, 70);
ctx.lineTo(80, 60);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
```
这段代码使用了HTML的Canvas元素和JavaScript的Canvas API来实现绘制六芒星的功能。在Canvas上创建了一个2D绘图上下文对象ctx,然后使用ctx的方法来绘制路径,最后通过调用`ctx.stroke()`方法来绘制路径的边框。