首页使用HTML5 canvas绘制五星红旗的源码

使用HTML5 canvas绘制五星红旗的源码

时间: 2024-12-22 20:18:52 浏览: 6

使用HTML5 Canvas绘制五星红旗的基本步骤如下：首先，需要创建一个新的`<canvas>`元素，并设置其宽度和高度以适应国旗尺寸。然后，使用JavaScript获取Canvas上下文并进行绘画。 ```html <!DOCTYPE html> <html lang="zh"> <head> <title>绘制五星红旗</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="flagCanvas" width="640" height="480"></canvas> <script> const canvas = document.getElementById('flagCanvas'); const ctx = canvas.getContext('2d'); // 五星红旗比例和位置 const redRectWidth = canvas.width / 3; const starPositions = [ { x: canvas.width / 10, y: canvas.height * 0.7 }, { x: canvas.width * 2 / 5 + redRectWidth / 2, y: canvas.height * 0.7 }, { x: canvas.width * 3 / 5, y: canvas.height * 0.7 } ]; // 绘制红色部分 ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height * 0.7); // 绘制五角星 for (let i = 0; i < 5; i++) { let pos = starPositions[i]; drawStar(ctx, pos.x, pos.y); } function drawStar(ctx, centerX, centerY) { const starRadius = redRectWidth / 3; ctx.beginPath(); ctx.moveTo(centerX - starRadius, centerY); ctx.lineTo(centerX + starRadius, centerY); ctx.lineTo(centerX, centerY - starRadius * Math.sqrt(2)); ctx.lineTo(centerX - starRadius, centerY); ctx.lineTo(centerX, centerY + starRadius * Math.sqrt(2)); ctx.closePath(); ctx.fill(); } </script> </body> </html> ``` 在这个例子中，我们先画出整个背景的红色矩形，然后计算出五个五角星的位置并逐个绘制。每个五角星通过函数`drawStar`进行绘制，其中使用了贝塞尔曲线来创建五角星的形状。

阅读全文