用canvas来致敬国旗
技术说明:
- 懂一些最基础的html语法
- 懂一些javascript
- 最重要的是：失败了一次不要放弃
直接上效果图
二话不多逼逼，看代码：
<!--
开发者：逆风
时间：2019/10/11
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas致敬祖国</title>
<style type="text/css">
#canvas{
border: 1px solid #CCC;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="900" height="600">
浏览器版本太低，不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//先画一面红色背景的矩形
context.beginPath();
context.lineWidth = "2";
context.fillStyle = "red";
//context.fillRect(0,0,450,300);
context.fillRect(0,0,900,600);
context.fill();
//开始画居中的大星星
context.beginPath();
context.lineWidth = "1";
context.strokeStyle = "yellow";
context.moveTo(150,60);
context.lineTo(170,125);
context.lineTo(240,125);
context.lineTo(185,160);
context.lineTo(200,223);
context.lineTo(150,183);
context.lineTo(100,223);
context.lineTo(115,160);
context.lineTo(60,125);
context.lineTo(130,125);
context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//开始画第一颗小星星
context.beginPath();
context.lineWidth = "1";
context.strokeStyle = "yellow";
context.moveTo(274,75);
context.lineTo(294,71);
context.lineTo(306,89);
context.lineTo(309,68);
context.lineTo(329,63);
context.lineTo(310,53);
context.lineTo(312,32);
context.lineTo(297,47);
context.lineTo(277,39);
context.lineTo(287,58);
context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//开始画第二颗小星星
context.beginPath();
context.lineWidth = "1";
context.strokeStyle = "yellow";
context.moveTo(330,124);
context.lineTo(351,128);
context.lineTo(354,149);
context.lineTo(365,131);
context.lineTo(386,134);
context.lineTo(372,118);
context.lineTo(381,99);
context.lineTo(362,107);
context.lineTo(347,92);
context.lineTo(349,114);
context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//开始画第三颗小星星
context.beginPath();
context.lineWidth = "1";
context.strokeStyle = "yellow";
context.moveTo(331,202);
context.lineTo(348,214);
context.lineTo(343,235);
context.lineTo(360,222);
context.lineTo(378,233);
context.lineTo(371,213);
context.lineTo(388,199);
context.lineTo(366,199);
context.lineTo(358,180);
context.lineTo(352,200);
context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//开始画第四颗小星星
context.beginPath();
context.lineWidth = "1";
context.strokeStyle = "yellow";
context.moveTo(277,251);
context.lineTo(287,269);
context.lineTo(274,286);
context.lineTo(295,281);
context.lineTo(307,299);
context.lineTo(309,277);
context.lineTo(329,271);
context.lineTo(310,263);
context.lineTo(311,242);
context.lineTo(296,258);
context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
</script>
</html>
总结：
- 其实里面很多代码都是重复的，如果需要优化一下的话，可以封装为一个函数
- 这个需求的难度在于：坐标定位，（每个小红星都有是个角，每个角都是不一样的）
- 此处我的坐标都是写死的，有些人会说我怎么知道这些坐标怎么来的。 (你先不用管这些，先看懂代码，运行成功后再考虑其它 )
优化 ：
- 有想法的可以尝试写一个函数，通过数学知识，求出相对应角的坐标
- 说不会的直接找度娘,只有自己看懂了，才是真本事。
