canvas绘制五星红旗
时间: 2023-08-03 09:54:32 浏览: 178
好的,下面是绘制五星红旗的代码,你可以在HTML5的canvas标签中插入这段代码,就能看到绘制的五星红旗啦!
```javascript
// 获取canvas元素
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, 110);
ctx.lineTo(400, 120);
ctx.lineTo(350, 170);
ctx.lineTo(360, 240);
ctx.lineTo(300, 200);
ctx.lineTo(240, 240);
ctx.lineTo(250, 170);
ctx.lineTo(200, 120);
ctx.lineTo(270, 110);
ctx.closePath();
ctx.fill();
// 绘制小星星
ctx.beginPath();
ctx.moveTo(330, 90);
ctx.lineTo(350, 120);
ctx.lineTo(320, 130);
ctx.lineTo(330, 150);
ctx.lineTo(310, 145);
ctx.lineTo(300, 170);
ctx.lineTo(290, 145);
ctx.lineTo(270, 150);
ctx.lineTo(280, 130);
ctx.lineTo(250, 120);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(300, 110);
ctx.lineTo(320, 130);
ctx.lineTo(300, 140);
ctx.lineTo(290, 160);
ctx.lineTo(280, 140);
ctx.lineTo(260, 130);
ctx.lineTo(280, 120);
ctx.lineTo(290, 100);
ctx.lineTo(300, 120);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(260, 150);
ctx.lineTo(280, 170);
ctx.lineTo(250, 180);
ctx.lineTo(260, 200);
ctx.lineTo(240, 195);
ctx.lineTo(232, 215);
ctx.lineTo(220, 195);
ctx.lineTo(200, 200);
ctx.lineTo(210, 180);
ctx.lineTo(180, 170);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(240, 130);
ctx.lineTo(260, 150);
ctx.lineTo(230, 160);
ctx.lineTo(240, 180);
ctx.lineTo(220, 175);
ctx.lineTo(212, 195);
ctx.lineTo(200, 175);
ctx.lineTo(180, 180);
ctx.lineTo(190, 160);
ctx.lineTo(160, 150);
ctx.closePath();
ctx.fill();
```
以上是绘制五星红旗的完整代码,可以直接复制使用。
阅读全文