首页canvas绘画五星红旗

canvas绘画五星红旗

时间: 2023-10-18 07:05:59 浏览: 91

以下是使用canvas绘制五星红旗的代码： ``` <html> <head> <title>Canvas五星红旗</title> </head> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //绘制红底 ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 600, 400); //绘制大星星 ctx.fillStyle = "#FFFF00"; ctx.beginPath(); ctx.moveTo(300, 50); ctx.lineTo(330, 120); ctx.lineTo(410, 120); ctx.lineTo(345, 170); ctx.lineTo(370, 240); ctx.lineTo(300, 200); ctx.lineTo(230, 240); ctx.lineTo(255, 170); ctx.lineTo(190, 120); ctx.lineTo(270, 120); ctx.closePath(); ctx.fill(); //绘制四个小星星 ctx.fillStyle = "#FFFF00"; ctx.beginPath(); ctx.moveTo(330, 160); ctx.lineTo(345, 120); ctx.lineTo(360, 160); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(300, 120); ctx.lineTo(300, 170); ctx.lineTo(270, 145); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(270, 170); ctx.lineTo(300, 195); ctx.lineTo(300, 245); ctx.lineTo(270, 220); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(345, 170); ctx.lineTo(360, 120); ctx.lineTo(375, 170); ctx.closePath(); ctx.fill(); </script> </body> </html> ``` 效果如下: ![五星红旗](https://cdn.luogu.com.cn/upload/image_hosting/czx7n1m6.png)

阅读全文