js canvas绘制五星红旗
见过不少人、经过不少事、也吃过不少苦，感悟世事无常、人心多变，靠着回忆将往事串珠成链，聊聊感情、谈谈发展，我慢慢写、你一点一点看......
js canvas绘制五星红旗，供参考，具体尺寸大小随机设的，需再次调整
<!DOCTYPE html>
<html>
<body>
<canvas id="flag" width="800" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById('flag');
var ctx = canvas.getContext('2d');
// 绘制红色的背景
ctx.fillStyle = '#ED1C24';
ctx.fillRect(0, 0, canvas.width, canvas.height);
function calculateStarPoints(centerX, centerY, outerRadius, innerRadius) {
const points = [];
for (let i = 0; i < 5; i++) {
const outerX = centerX + outerRadius * Math.cos((18 + i * 72) * Math.PI / 180);
const outerY = centerY - outerRadius * Math.sin((18 + i * 72) * Math.PI / 180);
points.push({ x: outerX, y: outerY });
const innerX = centerX + innerRadius * Math.cos((54 + i * 72) * Math.PI / 180);
const innerY = centerY - innerRadius * Math.sin((54 + i * 72) * Math.PI / 180);
points.push({ x: innerX, y: innerY });
}
return points;
}
function drawStar(ctx, centerX, centerY, outerRadius, innerRadius) {
const points = calculateStarPoints(centerX, centerY, outerRadius, innerRadius);
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
}
ctx.fillStyle = 'yellow';
drawStar(ctx, 250, 250, 100, 50);
drawStar(ctx, 400, 120, 30, 15);
drawStar(ctx, 440, 220, 30, 15);
drawStar(ctx, 440, 320, 30, 15);
drawStar(ctx, 400, 420, 30, 15);
ctx.fill();
</script>
</body>
</html>
关注我，不失联。有啥问题请留言。
感情恋爱合集
职业发展故事
常用代码片段
程序开发教程
自我备考经验