史上最詳細的使用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");
    // 畫線條函數
    function line(x1, y1, x2, y2) {
        myCanvas.moveTo(x1,y1);
        myCanvas.lineTo(x2,y2);
        myCanvas.stroke();
    }
    // line(0,100,300,100);
    // line(150,0,150,200);

    // 畫網格  橫線  參考線
    // for (var i = 0; i < 10; i++) {
    //     myCanvas.moveTo(0, i * 10);
    //     myCanvas.lineTo(150, i * 10);
    //     myCanvas.stroke();
    // }
    // 豎線
    // for (var i = 0; i < 15; i++) {
    //     myCanvas.moveTo(i * 10, 0);
    //     myCanvas.lineTo(i * 10, 100);
    //     myCanvas.stroke();
    // }
    
    // 畫參考圓的方法
    function circle(x, y, r) {
        myCanvas.beginPath();
        myCanvas.arc(x, y, r, 0, Math.PI * 2);
        myCanvas.strokeStyle = "yellow";
        myCanvas.stroke();
    }

    // 畫大圓
    // circle(50, 50, 30);
    // 畫小圓
    // circle(100, 20, 10);
    // circle(120, 40, 10);
    // circle(120, 70, 10);
    // circle(100, 90, 10);

    // 畫大五角星
    star(50, 50, 30,0);


    // 畫小五角星
    star(100, 20, 10,Math.atan((50-20)/(50-100))-Math.PI/2);
    star(120, 40, 10,Math.atan((50-40)/(50-120))-Math.PI/2);
    star(120, 70, 10,Math.atan((50-70)/(50-120))-Math.PI/2);
    star(100, 90, 10,Math.atan((50-90)/(50-100))-Math.PI/2);
    
    // 繪製五角星的方法
    function star(x, y, r,deg) {
        myCanvas.save();
        myCanvas.translate(x, y);
        myCanvas.rotate(deg)
        myCanvas.beginPath();
        var x = 0,
            y = 0;
        var du = Math.PI * 4 / 5;
        for (var i = 0; i < 5; i++) {
            myCanvas.lineTo(Math.cos(i * du - Math.PI / 2) * r, Math.sin(i * du - Math.PI / 2) * r);
        }
        myCanvas.closePath();
        // myCanvas.stroke();
        myCanvas.fillStyle = "yellow";
        myCanvas.fill();
        myCanvas.restore();
    }




    // 封裝前的方法，操作
    // myCanvas.lineTo(0,-30);
    // myCanvas.lineTo(Math.cos(du-Math.PI/2)*30,Math.sin(du-Math.PI/2)*30);
    // myCanvas.lineTo(Math.cos(2*du-Math.PI/2)*30,Math.sin(2*du-Math.PI/2)*30);
    // myCanvas.lineTo(Math.cos(3*du-Math.PI/2)*30,Math.sin(3*du-Math.PI/2)*30);
    // myCanvas.lineTo(Math.cos(4*du-Math.PI/2)*30,Math.sin(4*du-Math.PI/2)*30);



    // myCanvas.translate(50,50);
    // myCanvas.beginPath();
    // myCanvas.arc(0,0,50,0,Math.PI/2);
    // myCanvas.strokeStyle="blue";
    // myCanvas.stroke();

    // myCanvas.strokeStyle="black";
    // line(50,50,100,20);
    // line(50,50,120,40);
    // line(50,50,120,70);
    // line(50,50,100,90);

總結： 繪製五星紅旗首先要知道五星紅旗的製作說明，其次在這裏還要用到我們中學所學到的三角函數的知識。

視頻講解鏈接：
https://www.bilibili.com/video/BV1Lp4y1D7ZU/