首页HTML用canvas画布绘制五星红旗代码

HTML用canvas画布绘制五星红旗代码

时间: 2024-04-27 21:22:05 浏览: 110

以下是使用HTML5中的canvas画布绘制五星红旗的代码： ```html <!DOCTYPE html> <html> <head> <title>绘制五星红旗</title> <meta charset="UTF-8"> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制红色矩形 ctx.fillStyle = "red"; ctx.fillRect(0, 0, 300, 200); // 绘制黄色五角星 ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.moveTo(150, 40); ctx.lineTo(170, 90); ctx.lineTo(220, 90); ctx.lineTo(180, 120); ctx.lineTo(200, 170); ctx.lineTo(150, 140); ctx.lineTo(100, 170); ctx.lineTo(120, 120); ctx.lineTo(80, 90); ctx.lineTo(130, 90); ctx.closePath(); ctx.fill(); </script> </body> </html> ``` 在浏览器中打开以上代码，即可看到使用canvas画布绘制的五星红旗。

阅读全文