canvas绘制中国国旗！

深藏阁楼爱情的钟 2022-10-15 04:47 188阅读 0赞

## 绘制中国国旗 ##

### 1、题目 ###

> 今天刚学了H5中的画布canvas元素，课堂上的案例挺有意思，就心血来潮想利用canvas绘制中国国旗；

### 2、思路 ###

1.  第一步，创建画布元素，在画布内作好辅助线和网格线来确定圆的位置；
2.  第二步，作好网格线后，我们先定好大圆的坐标和小圆的坐标；
3.  第三步，绘制出一个大圆和四个小圆；
4.  第四步，在大圆内绘制出五角星，和在第一个小圆内画出五角星，旋转画布为固定的弧度值绘制出其他三个小五角星，并且将大五角星和四个小五角星的元素填充至黄色（外边轮廓默认为黑色）；
5.  第五步，五星红旗绘制完毕，取消辅助线渲染至页面；

### 3、效果展示图 ###

**（过程图）**：

![在这里插入图片描述][20210523163126236.gif_pic_center]  
**（展示图）**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

### 4、写法 ###

**绘制辅助线和网格**：

1.  将页面红色区域分为四个部分，做一条横向和竖向辅助线，将第二象限的区域绘制网格；
2.  有了网格可以确定五角星的位置，我们将大五角星的坐标用网格坐标表示出来，同样的将四个小五角星的坐标用网格坐标表示出来，将小五角星的坐标用数组存起来；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 2]

**绘制大圆和小圆**：

1.  利用大五角星的网格坐标\*画布高度，绘制路径将大圆绘制在画布中；
2.  利用小五角星的网格坐标\*画布高度，绘制路径将小圆绘制在画布中；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 3]

**绘制大五角星和四个小五角星**：

1.  在大圆中确定圆心作为原点，在大圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；
2.  在小圆中确定圆心作为原点，在小圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 4]

**封装绘制五角星函数**：

1.  创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离radius,rotate=0时一个顶点在对称轴上 ； rotate:绕对称轴旋转rotate弧度
2.  计算五角星在圆内部的顶点的角度，在循环中绘制出五角星的五条边，将顶点依次连接起来；
3.  旋转画布，创建出剩余的五角星；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 5]

### 5、参考代码块 ###

<!DOCTYPE HTML>
    
    <html>
    
        <head>
    
            <meta charset="UTF-8">
    
            <title></title>
    
        </head>
    
        <body>
    
            <canvas id="canvas" width="600" height="400"></canvas>
    
            <script type="text/javascript"> // 使用HTML5绘制五星红旗 var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var width = canvas.width; //确定画布的宽度（600） var height = width * 2 / 3; //确定画布的高度 （400） var w = width / 30;//小网格的宽 （20） context.fillStyle = "red"; context.fillRect(0, 0, width, height); var maxR = 0.15, minR = 0.05;//大五角星的半径，小五角星的半径 var maxX = 0.25, maxY = 0.25;//大五星的位置 // 小五角星的位置 var minX = [0.50, 0.60, 0.60, 0.50]; var minY = [0.10, 0.20, 0.35, 0.45]; // 画大 ☆ var ox = height * maxX, oy = height * maxY; create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星 // 画小 ★ for (var idx = 0; idx < 4; idx++) { var sx = minX[idx] * height, sy = minY[idx] * height; // 计算大五角星圆心和小五角星圆心连线的斜率（也就是画布旋转的弧度值） var theta = Math.atan((oy - sy) / (ox - sx)); create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta); } //辅助线 // context.moveTo(0, height / 2) // context.lineTo(width, height / 2); // context.stroke(); // context.moveTo(width / 2, 0); // context.lineTo(width / 2, height); // context.stroke(); //画网格，竖线 // for (var j = 0; j < 15; j++) { // context.moveTo(j * w, 0); // context.lineTo(j * w, height / 2); // context.stroke(); // } //画网格，横线 // for (var j = 0; j < 10; j++) { // context.moveTo(0, j * w); // context.lineTo(width / 2, j * w); // context.stroke(); // } //画大圆 // context.beginPath(); // context.arc(ox, oy, maxR * height, 0, Math.PI * 2, false); // context.closePath(); // context.stroke(); // 画小圆 // for (var idx = 0; idx < 4; idx++) { // context.beginPath(); // var sx = minX[idx] * height, sy = minY[idx] * height; // context.arc(sx, sy, height * minR, 0, Math.PI * 2, false); // context.closePath(); // context.stroke(); // } //大圆中心与小圆中心连接线 // for (var idx = 0; idx < 4; idx++) { // context.moveTo(ox, oy); // var sx = minX[idx] * height, sy = minY[idx] * height; // context.lineTo(sx, sy); // context.stroke(); // } //绘制五角星 /** * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 * rotate:绕对称轴旋转rotate弧度 */ function create5star(context, sx, sy, radius, color, rotato){ context.save(); context.fillStyle = color; context.translate(sx, sy);//移动坐标原点 context.rotate(Math.PI + rotato);//旋转 context.beginPath();//创建路径 var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { //画五角星的五条边 var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(x * radius, y * radius); } context.closePath(); context.stroke(); context.fill(); context.restore(); } </script>
    
        </body>
    
    </html>

### 6、总结 ###

绘制五星红旗，样式其实蛮简单，主要是五星红旗的五角星很难想到如何绘制，以及计算角度很麻烦，如果克服了这些就没有什么难度了。

[20210523163126236.gif_pic_center]: /images/20221014/e19bc821f0fb495882d2ac1272ba041c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/84ee1be483b344b7a33071645add8ae9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left]: /images/20221014/44a5f7be12f64c90ab0ec2a0b4aad17c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221014/8798b48e207d4d0f8b2711725b2cbb0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221014/207979ee5be34effa4aa7cabae6766f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221014/e4ceeedfef6c440492a34237c5bac3e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 4]: /images/20221014/4610fb1ef1254574a05f07d243446e1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_left 5]: /images/20221014/24454fb90be24e069c3061c707d39f34.png