史上最详细的使用canvas绘制五星红旗的方法

史上最详细的使用canvas绘制五角星的方法

昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图：

上篇文章我们已经讲到了五星红旗的制法说明。

（一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。

（二）五星之位置与画法如下:

• 为便于确定五星之位置，先将旗面对分为四个相等的长方形，将左上方之长方形上下划为十等分，左右划为十五等分。
• 大五角星的中心点，在该长方形上五下五、左五右十之处。其画法为:以此点为圆心，以三等分为半径作一圆。在此圆周上，定出五个等距离的点，其一点须位于圆之正上方。然后将此五点中各相隔的两点相联，使各成一直线。此五直线所构成之外轮廓线，即为所需之大五角星。五角星之一个角尖正向上方。
• 四颗小五角星的中心点，第一点在该长方形上二下八、左十右五之处，第二点在上四下六、左十二右三之处，第三点在上七下三、左十二右三之处，第四点在上九下一、左十右五之处。其画法为:以以上四点为圆心，各以一等分为半径，分别作四个圆。在每个圆上各定出五个等距离的点，其中均须各有一点位于大五角星中心点与以上四个圆心的各联结线上。然后用构成大五角星的同样方法，构成小五角星。此四颗小五角星均各有一个角尖正对大五角星的中心点。

效果如图：

接下来我们来讲解一下怎样使用canvas画布来绘制五星红旗。

HTML代码：

    <canvas id="my_canvas"></canvas>

CSS代码：

        * {
   
            margin: 0;
            padding: 0;
        }

        canvas {
   
            background: red;
        }

Javascript代码：

    //获取画布
    var oCanvas = document.getElementById("my_canvas");
    // 设置画布的尺寸
    oCanvas.width = 300;
    oCanvas.height = 200;
    // 获取/创建画布环境
    var myCanvas = oCanvas.getContext("2d")