前端小項目：使用canvas繪畫哆啦A夢

最近在學canvas元素,<canvas>標籤只是圖形容器，必須使用js來繪製圖形。爲了加強對canvas元素的理解,因而用canvas畫了一個哆啦A夢來

要實現的效果圖

在線預覽

要想繪畫出這個哆啦a夢首先要掌握如下一些函數：

• arcTo()
• canvas繪製圓形或弧線
• bezierCurveTo()
• quadraticCurveTo()

開始繪畫！！

首先咱們須要建立一個400*600的畫布，代碼以下:

<canvas id="doraemon" width="400" height="600"></canvas>
複製代碼

接着定義一個div，用來顯示座標

<div id="put" style="width: 50px" height="20px"></div>
複製代碼

接着我寫了一個顯示座標的函數，能夠用來看大概畫到哪一個點：

function zuobiao(event) {
        var x = event.clientX;
        var y = event.clientY;
        var out = document.getElementById("put");
        out.innerHTML = "x:" + x + " y:" + y;
    }
複製代碼

而後getContext() 方法返回一個用於在畫布上繪圖的環境。

var cxt = document.getElementById('doraemon').getContext('2d');
複製代碼

接着開始畫頭部:

cxt.beginPath();//起始路徑
        cxt.lineWidth = 1;//線寬度爲1
        cxt.strokeStyle = '#000';//筆觸的顏色
        cxt.arc(200, 175, 175, 0.7 * Math.PI, 0.3 * Math.PI);//繪製弧，中心點（200，175），半徑175
        cxt.fillStyle = '#0bb0da';//設置填充時的顏色
        cxt.fill();//填充顏色
        cxt.stroke();//繪製路徑
複製代碼

頭部以下：

接着繪畫出臉部：

cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.moveTo(110, 110);//將路徑移到點（110，110），不建立線條
        cxt.quadraticCurveTo(-10, 200, 120, 315);//建立二次貝塞爾曲線,控制點(-10,200),結束點(120,315)
        cxt.lineTo(280, 315);//添加一個新點，而後在畫布中建立從（110，110）到（280，315）的線條
        cxt.quadraticCurveTo(410, 210, 290, 110);
        cxt.lineTo(110, 110);
        cxt.fill();
        cxt.stroke();
複製代碼

臉部以下：

接着繪畫眼睛：

cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.fillStyle = '#fff';
        cxt.moveTo(110, 110);
        cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//建立三次貝塞爾曲線,控制點1(110,25),控制點2(200,25),結束點(200,100)，也就是畫左上半橢圓
        cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//畫左下半橢圓
        cxt.moveTo(200, 100);
        cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);
        cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);
        cxt.fill();
        cxt.stroke();

複製代碼

接着畫左右眼球：

/*右眼球*/
        cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.arc(230, 130, 12, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        /*左眼球*/
        cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.arc(170, 130, 12, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
複製代碼

左右眼球：

接着畫鼻子：

cxt.beginPath();
        cxt.arc(200, 165, 25, 0, 2 * Math.PI);
        cxt.fillStyle = '#d05823';
        cxt.fill();
        cxt.stroke();
複製代碼

鼻子：

接着畫鬍鬚：

//左鬍鬚
        cxt.beginPath();
        cxt.moveTo(80, 175);
        cxt.lineTo(150, 195);
        cxt.moveTo(80, 200);
        cxt.lineTo(150, 205);
        cxt.moveTo(80, 225);
        cxt.lineTo(150, 215);
        //中部鬍鬚
        cxt.moveTo(200, 195);
        cxt.lineTo(200, 290);
        //右鬍鬚
        cxt.moveTo(250, 195);
        cxt.lineTo(320, 175);
        cxt.moveTo(250, 205);
        cxt.lineTo(320, 200);
        cxt.moveTo(250, 215);
        cxt.lineTo(320, 225);
        cxt.stroke();
複製代碼

鬍鬚:

接着畫嘴：

cxt.moveTo(80, 240);
        cxt.quadraticCurveTo(200, 350, 320, 240);
        cxt.stroke();
複製代碼

嘴：

接下來畫圍巾：

cxt.beginPath();
        cxt.moveTo(96, 316);
        cxt.lineTo(305, 316);
        cxt.lineTo(320, 316);
        cxt.arcTo(330, 316, 330, 326, 10);//在畫布上建立介於兩個切線之間的弧，起點座標爲(330,316),終點座標爲(330,326),半徑爲10
        cxt.lineTo(330, 336);
        cxt.arcTo(330, 346, 305, 346, 10);
        cxt.lineTo(81, 346);
        cxt.arcTo(71, 346, 71, 336, 10);
        cxt.lineTo(71, 326);
        cxt.arcTo(71, 316, 81, 316, 10);
        cxt.lineTo(96, 316);
        cxt.fillStyle = '#b13209';
        cxt.fill();
        cxt.stroke();
複製代碼

圍巾：

接着畫衣服：

cxt.beginPath();
        cxt.fillStyle = '#0bb0da';
        cxt.moveTo(80, 346);
        //左衣服
        cxt.lineTo(26, 406);
        cxt.lineTo(65, 440);
        cxt.lineTo(85, 418);
        cxt.lineTo(85, 528);
        cxt.lineTo(185, 528);
        //右衣服
        cxt.lineTo(315, 528);
        cxt.lineTo(315, 418);
        cxt.lineTo(337, 440);
        cxt.lineTo(374, 406);
        cxt.lineTo(320, 346);
        cxt.fill();
        cxt.stroke();
複製代碼

衣服：

接着畫手：

//左手
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(37, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        //右手
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(363, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
複製代碼

手：

接着畫肚：

cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);
        cxt.fill();
        cxt.stroke();
複製代碼

肚：

接着畫小口袋

cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.moveTo(130, 394);
        cxt.lineTo(270, 394);
        cxt.moveTo(130, 394);
        cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);
        cxt.fill();
        cxt.stroke();
複製代碼

小口袋：

最後畫兩隻腳以及兩隻腳的的空隙：

/*兩隻腳的空隙*/
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(200, 529, 20,Math.PI, 0);
        cxt.fill();
        cxt.stroke();
        /*腳*/
        //左腳
        cxt.beginPath();
        cxt.fillStyle='#fff';
        cxt.moveTo(180,528);
        cxt.lineTo(72,528);
        cxt.bezierCurveTo(52,528,52,558,72,558);
        cxt.lineTo(180,558);
        cxt.moveTo(180,558);
        cxt.bezierCurveTo(200,558,200,528,180,528);
        cxt.fill();
        cxt.stroke();
        //右腳
        cxt.beginPath();
        cxt.fillStyle='#fff';
        cxt.moveTo(220,528);
        cxt.lineTo(328,528);
        cxt.bezierCurveTo(348,528,348,558,328,558);
        cxt.lineTo(220,558);
        cxt.moveTo(220,558);
        cxt.bezierCurveTo(200,558,200,528,220,528);
        cxt.fill();
        cxt.stroke();
複製代碼

完成了︿(￣︶￣)︿

完整代碼請點擊：哆啦A夢