html canvas绘制五星红旗
时间: 2023-11-08 20:58:42 浏览: 31
以下是绘制五星红旗的HTML Canvas代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>五星红旗</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</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.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.moveTo(300, 100);
ctx.lineTo(330, 160);
ctx.lineTo(390, 160);
ctx.lineTo(340, 195);
ctx.lineTo(360, 250);
ctx.lineTo(300, 215);
ctx.lineTo(240, 250);
ctx.lineTo(260, 195);
ctx.lineTo(210, 160);
ctx.lineTo(270, 160);
ctx.fill();
// 绘制四个小星星
ctx.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.moveTo(330, 190);
ctx.lineTo(345, 220);
ctx.lineTo(375, 220);
ctx.lineTo(350, 240);
ctx.lineTo(360, 270);
ctx.lineTo(330, 250);
ctx.lineTo(300, 270);
ctx.lineTo(310, 240);
ctx.lineTo(285, 220);
ctx.lineTo(315, 220);
ctx.fill();
</script>
</body>
</html>
```
解释一下代码:
首先获取到Canvas元素和2D上下文,然后使用fillRect()方法绘制红底。接着使用beginPath()方法开始绘制大星星,使用fillStyle属性指定颜色,使用lineTo()方法连接点,最后使用fill()方法填充颜色。同样地,使用beginPath()方法开始绘制四个小星星,使用fillStyle属性指定颜色,使用lineTo()方法连接点,最后使用fill()方法填充颜色。最终的效果如下图所示:
![五星红旗](https://i.loli.net/2021/10/10/1naXJb9TQ2Vd8fw.png)