军旗完整代码html加js
时间: 2023-11-29 13:03:58 浏览: 238
2048军旗版游戏,基于html5+js制作。键盘上下左右按键,开始游戏
5星 · 资源好评率100%
以下是一个简单的军旗动画的完整代码,包含 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>军旗动画</title>
<style>
body {
background-color: #333;
padding: 0;
margin: 0;
}
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
/* 无需额外的 CSS 样式 */
```
JavaScript 代码:
```javascript
// 获取画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义旗帜颜色
const red = '#FF0000';
const yellow = '#FFFF00';
// 绘制旗帜
function drawFlag(x, y, width, height) {
// 绘制红色背景
ctx.fillStyle = red;
ctx.fillRect(x, y, width, height);
// 绘制黄色星星
ctx.fillStyle = yellow;
const starSize = height / 5; // 星星大小
const starSpacing = starSize / 2; // 星星间距
const rowSpacing = height / 10; // 行间距
const colSpacing = width / 14; // 列间距
// 循环绘制星星
for (let row = 0; row < 5; row++) {
for (let col = 0; col < 4; col++) {
// 计算星星位置
const starX = x + col * colSpacing + (row % 2) * colSpacing / 2;
const starY = y + row * rowSpacing;
// 绘制五角星
drawStar(starX, starY, starSize);
}
}
}
// 绘制五角星
function drawStar(x, y, size) {
const points = 5; // 五角星有五个点
const angle = Math.PI / 5; // 每个点的角度
const halfSize = size / 2; // 五角星半径
// 绘制路径
ctx.beginPath();
ctx.moveTo(x + halfSize * Math.cos(0), y + halfSize * Math.sin(0));
for (let i = 1; i < points * 2; i++) {
const r = i % 2 == 0 ? halfSize : halfSize / 2; // 偶数点为外圆半径,奇数点为内圆半径
const currAngle = i * angle;
ctx.lineTo(x + r * Math.cos(currAngle), y + r * Math.sin(currAngle));
}
ctx.closePath();
// 填充路径
ctx.fill();
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制旗帜
const flagWidth = canvas.width / 3; // 旗帜宽度
const flagHeight = flagWidth * 2 / 3; // 旗帜高度
const flagX = canvas.width / 2 - flagWidth / 2; // 旗帜左上角 X 坐标
const flagY = canvas.height / 2 - flagHeight / 2; // 旗帜左上角 Y 坐标
drawFlag(flagX, flagY, flagWidth, flagHeight);
}
// 启动动画
animate();
```
将以上代码保存为三个文件,分别是 `index.html`、`style.css` 和 `script.js`,放在同一个文件夹中,然后在浏览器中打开 `index.html` 即可看到军旗动画效果。
阅读全文