canvas绘制中国国旗！

绘制中国国旗

1、题目

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

2、思路

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

3、效果展示图

（过程图）：

在这里插入图片描述
（展示图）：

4、写法

绘制辅助线和网格：

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

在这里插入图片描述

绘制大圆和小圆：

利用大五角星的网格坐标*画布高度，绘制路径将大圆绘制在画布中；
利用小五角星的网格坐标*画布高度，绘制路径将小圆绘制在画布中；

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

在大圆中确定圆心作为原点，在大圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；
在小圆中确定圆心作为原点，在小圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；

封装绘制五角星函数：

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

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>