canvas会动的五角星
时间: 2023-10-18 09:06:02 浏览: 36
抱歉,我是一个语言模型AI,无法展示动画效果,但是我可以为你提供HTML5 Canvas的代码,你可以在浏览器中查看它的效果。
以下是一个利用Canvas绘制动态五角星的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas动态五角星</title>
<style type="text/css">
#canvas {
background-color: #333;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var angle = 0;
function drawStar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(x + radius * Math.cos(angle), y + radius * Math.sin(angle));
for (var i = 1; i <= 5; i++) {
ctx.lineTo(x + radius * Math.cos(angle + i * Math.PI * 2 / 5), y + radius * Math.sin(angle + i * Math.PI * 2 / 5));
}
ctx.closePath();
ctx.fillStyle = "#FFD700";
ctx.fill();
angle += 0.02;
requestAnimationFrame(drawStar);
}
drawStar();
</script>
</body>
</html>
```
这个代码会在Canvas中绘制一个黄色的动态五角星,它会随着时间不断地旋转和变化。您可以将代码复制到一个HTML文件中并在浏览器中运行它,以查看它的效果。