HTML canvas绘制五星红旗
时间: 2023-10-16 19:10:54 浏览: 72
好的,以下是HTML canvas绘制五星红旗的代码:
```html
<canvas id="myCanvas" width="600" height="400"></canvas>
```
```javascript
// 获取canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置画布样式
ctx.fillStyle = "#DE2910";
ctx.fillRect(0, 0, 600, 400);
ctx.fillStyle = "#FFDE00";
// 绘制大星星
ctx.beginPath();
ctx.moveTo(300, 60);
ctx.lineTo(330, 130);
ctx.lineTo(410, 130);
ctx.lineTo(345, 175);
ctx.lineTo(370, 245);
ctx.lineTo(300, 200);
ctx.lineTo(230, 245);
ctx.lineTo(255, 175);
ctx.lineTo(190, 130);
ctx.lineTo(270, 130);
ctx.closePath();
ctx.fill();
// 绘制四个小星星
ctx.beginPath();
ctx.moveTo(340, 190);
ctx.lineTo(360, 190);
ctx.lineTo(365, 170);
ctx.lineTo(370, 190);
ctx.lineTo(390, 190);
ctx.lineTo(375, 200);
ctx.lineTo(380, 220);
ctx.lineTo(365, 205);
ctx.lineTo(350, 220);
ctx.lineTo(355, 200);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(245, 190);
ctx.lineTo(265, 190);
ctx.lineTo(270, 170);
ctx.lineTo(275, 190);
ctx.lineTo(295, 190);
ctx.lineTo(280, 200);
ctx.lineTo(285, 220);
ctx.lineTo(270, 205);
ctx.lineTo(255, 220);
ctx.lineTo(260, 200);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(290, 230);
ctx.lineTo(310, 230);
ctx.lineTo(315, 210);
ctx.lineTo(320, 230);
ctx.lineTo(340, 230);
ctx.lineTo(325, 240);
ctx.lineTo(330, 260);
ctx.lineTo(315, 245);
ctx.lineTo(300, 260);
ctx.lineTo(305, 240);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(290, 150);
ctx.lineTo(310, 150);
ctx.lineTo(315, 130);
ctx.lineTo(320, 150);
ctx.lineTo(340, 150);
ctx.lineTo(325, 160);
ctx.lineTo(330, 180);
ctx.lineTo(315, 165);
ctx.lineTo(300, 180);
ctx.lineTo(305, 160);
ctx.closePath();
ctx.fill();
```
这段代码会在canvas上绘制出五星红旗的图案。
阅读全文