用js写一个甜点flash动画
时间: 2023-12-10 08:04:47 浏览: 30
很好,这是一个有趣的任务!下面是一个简单的甜点 Flash 动画的示例代码,你可以在浏览器中打开它来查看效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>甜点 Flash 动画</title>
<meta charset="utf-8">
<style>
#flash-container {
width: 400px;
height: 400px;
background-color: #FFF;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="flash-container"></div>
<script>
// 创建画布
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.getElementById('flash-container').appendChild(canvas);
// 获取绘图上下文
var ctx = canvas.getContext('2d');
// 绘制背景
ctx.fillStyle = '#FDD';
ctx.fillRect(0, 0, 400, 400);
// 绘制圆形
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = '#F00';
ctx.fill();
// 绘制甜点
ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineTo(150, 200);
ctx.lineTo(200, 250);
ctx.lineTo(250, 200);
ctx.closePath();
ctx.fillStyle = '#FFF';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#F00';
ctx.stroke();
// 添加动画效果
var angle = 0;
function animate() {
angle += 0.1;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(angle);
ctx.translate(-200, -200);
ctx.fillStyle = '#F00';
ctx.fillRect(170, 170, 60, 60);
ctx.restore();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```
这个示例代码创建了一个圆形和一个甜点,并添加了一个旋转的动画效果。你可以根据需要进行修改和扩展。