最近在學canvas元素,
<canvas>標籤只是圖形容器，必須使用js來繪製圖形。為了增強對canvas元素的理解,於是用canvas畫了一個哆啦A夢來
要實現的效果圖
要想繪畫出這個哆啦a夢首先要掌握以下一些函式：
開始繪畫！！
首先我們需要建立一個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夢