IT工程師數位筆記本

.getContext("2d")=======>獲取繪圖接口　　//2d

.beginPath()========>創建繪圖路徑開始點

.moveTo(x,y)==========>移動繪畫點到x,y

.lineTo(x,y)============>繪制線條

.strokeStyle = "#000"  ======>設置線條顏色　　//黑色(#000)

.fillStyle = "#000"  =========>封閉圖形填充顏色  //黑色(#000)

.fill()==================>填充

.stroke()==============>繪制線條到畫布(我個人理解:確認要畫下去的意思)

原理是用線條畫一個星星(只要外面的六個角的坐標[最后還要回到開始的地方]),然后再填充顏色,國旗背景色由css控制

效果圖:

未填充:

填充后:

-------------------------------最終效果圖------------------

好像有點歪了...沒辦法,本人是直接用ps量的~~

html代碼:

    <canvas id="flag">
        你的瀏覽器居然不支持canvas?!趕緊換一個瀏覽器吧.
    </canvas>

css代碼:

        #flag{
            background: #f00;

　　　　/* 國旗背景色 */
        }

JavaScript代碼(星星代碼):

var myCanvas = document.getElementById("flag")
myCanvas.width = 600;
myCanvas.height = 400;

var ctx = myCanvas.getContext("2d");

// 創建繪制路徑開始點

// 大星星
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(103,49);
ctx.lineTo(141,164);
ctx.lineTo(43,92);
ctx.lineTo(164,92);
ctx.lineTo(66,164);
ctx.lineTo(103,49);
ctx.fill();
ctx.stroke();

// 小星星 第一個
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(186,61);
ctx.lineTo(216,26);
ctx.lineTo(214,72);
ctx.lineTo(189,33);
ctx.lineTo(231,50);
ctx.lineTo(186,61);
ctx.fill();
ctx.stroke();

// 小星星 第二個
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(228,96);
ctx.lineTo(269,76);
ctx.lineTo(247,117);
ctx.lineTo(241,71);
ctx.lineTo(273,104);
ctx.lineTo(244,99);
ctx.fill();
ctx.stroke();

// 小星星 第三個
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(224,148);
ctx.lineTo(273,148);
ctx.lineTo(236,175);
ctx.lineTo(249,131);
ctx.lineTo(265,175);
ctx.lineTo(224,148);
ctx.fill();
ctx.stroke();

// 小星星 第4個
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(189,182);
ctx.lineTo(231,199);
ctx.lineTo(186,211);
ctx.lineTo(216,175);
ctx.lineTo(213,221);
ctx.lineTo(189,182);
ctx.fill();
ctx.stroke();