學習canvas時畫的一個哆啦A夢，還有不足，以後改進
具體實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mycav{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycav" width="800" height="600"></canvas>
<script>
var cav = document.getElementById('mycav');
var can = cav.getContext('2d');
can.beginPath();
can.strokeStyle = '#000';
can.fillStyle = '#00A0E8';
can.arc(300,280,100,(2/3)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = '#000';
can.fillStyle = '#fff';
can.arc(300,300,80,(2/3)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*
* context爲Canvas的2D繪圖環境對象，
* x爲橢圓中心橫座標，
* y爲橢圓中心縱座標，
* a爲橢圓橫半軸長，
* b爲橢圓縱半軸長。
*/
function ParamEllipse(context, x, y, a, b)
{
//max是等於1除以長軸值a和b中的較大者
//i每次循環增加1/max，表示度數的增加
//這樣可以使得每次循環所繪製的路徑（弧線）接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //從橢圓的左端點開始繪製
for (var i = 0; i < 2 * Math.PI; i += step)
{
//參數方程爲x = a * cos(i), y = b * sin(i)，
//參數爲i，表示度數（弧度）
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
}
can.beginPath();
can.fillStyle = '#fff';
can.strokeStyle = "#000";
ParamEllipse(can,280,220,15,20);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.fillStyle = '#fff';
can.strokeStyle = "#000";
ParamEllipse(can,310,220,15,20);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(282,225,5,0,Math.PI,true);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(308,225,5,0,Math.PI,true);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#CC0D30";
can.arc(295,250,15,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.fillStyle = "#fff";
can.arc(293,247,6,0,2*Math.PI);
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(297,265);
can.lineTo(300,320);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,270);
can.lineTo(230,250);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,280);
can.lineTo(220,280);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,290);
can.lineTo(230,310);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,270);
can.lineTo(360,250);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,280);
can.lineTo(370,280);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,290);
can.lineTo(360,310);
can.stroke();
can.closePath();
can.beginPath();
can.arc(300,270,50,0,Math.PI);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#E5012D";
can.fillRect(250,365,100,10);
can.stroke();
can.fill();
can.closePath();
/*肚子*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(300,443,80,-(1/3)*Math.PI,(4/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*口袋*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(300,418,50,-(1/3)*Math.PI,(4/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(270,418);
can.lineTo(330,418);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(300,418,30,0,Math.PI);
can.stroke();
can.closePath();
/*左胳膊半圓*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(250,375,10,-(5/6)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*左胳膊矩形*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.rotate(-40*Math.PI/180);
can.rect(-133,438,80,20);
can.stroke();
can.fill();
can.closePath();
/*左胳膊圓*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(-133,450,13,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*右胳膊半圓*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(31,515,10,-(7/6)*Math.PI,(1/6)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*右胳膊矩形*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.rotate(90*Math.PI/180);
can.rect(520,-42,80,20);
can.stroke();
can.fill();
can.closePath();
/*右胳膊圓*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(600,-34,13,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
</script>
</body>
</html>