html部分：
快去升级你的浏览器吧！
js 部分：
var ctx = document.getElementById('doraemon').getContext('2d'); // getContext() 方法返回一个用于在画布上绘图的环境。
// 头部
ctx.beginPath(); // 起始一条路径，或重置当前路径
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.beginPath(); ctx.moveTo(82, 300);
ctx.bezierCurveTo(-31, 172, 36, 0, 200, 0);
ctx.bezierCurveTo(364, 0, 432, 172, 318, 300);
ctx.fillStyle = '#029AE3';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(90, 300);
ctx.bezierCurveTo(10, 177, 30, 50, 200, 60);
ctx.bezierCurveTo(370, 50, 390, 177, 310, 300);
ctx.fillStyle = '#FDFDFD';
ctx.fill();
ctx.stroke();
// 眼睛
ctx.beginPath();
ctx.moveTo(127, 50);
ctx.bezierCurveTo(127, -6, 200, -6, 200, 50);
ctx.bezierCurveTo(198, 106, 127, 106, 127, 50);
ctx.moveTo(164, 60); // 把路径移动到画布中的指定点，不创建路径。
ctx.quadraticCurveTo(177, 30, 190, 60);
ctx.fillStyle = '#FDFDFD';
ctx.fill(); ctx.stroke(); ctx.beginPath();
ctx.moveTo(200, 50);
ctx.bezierCurveTo(200, -6, 273, -6, 273, 50);
ctx.bezierCurveTo(271, 106, 200, 106, 200, 50);
ctx.moveTo(214, 60); // 把路径移动到画布中的指定点，不创建路径。
ctx.quadraticCurveTo(227, 30, 240, 60);
ctx.fillStyle = '#FDFDFD';
ctx.fill();
ctx.stroke();
// 鼻子
ctx.beginPath();
ctx.arc(200, 103, 25, 0, 2*Math.PI); // 坐标，半径，起始位置
ctx.fillStyle = '#DC1025';
ctx.fill();
ctx.moveTo(200, 129);
ctx.lineTo(200, 252);
ctx.closePath(); // closePath() 方法创建从当前点到开始点的路径。
ctx.stroke();
ctx.beginPath();
ctx.arc(195, 93, 9, 0, 2*Math.PI); // 坐标，半径，起始位置
ctx.fillStyle = '#FDFDFD'; ctx.fill();
// 胡须
ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(165, 130);
ctx.closePath();
ctx.moveTo(58, 152);
ctx.lineTo(160, 156);
ctx.closePath();
ctx.moveTo(62, 196);
ctx.lineTo(165, 182);
ctx.closePath();
ctx.moveTo(233, 130);
ctx.lineTo(320, 100);
ctx.closePath();
ctx.moveTo(237, 156);
ctx.lineTo(343, 152);
ctx.closePath();
ctx.moveTo(235, 182);
ctx.lineTo(340, 196);
ctx.closePath();
ctx.stroke();
// 嘴巴
ctx.beginPath();
ctx.moveTo(75, 170);
ctx.quadraticCurveTo(200, 336, 335, 170);
ctx.stroke();
// 围巾
ctx.beginPath();
ctx.moveTo(80, 311);
ctx.quadraticCurveTo(75, 302, 80, 296);
ctx.quadraticCurveTo(200, 302, 322, 296);
ctx.quadraticCurveTo(330, 302, 322, 311);
ctx.quadraticCurveTo(200, 322, 80, 311);
ctx.fillStyle = '#DC1025';
ctx.fill();
ctx.stroke();
// 铃铛
ctx.beginPath();
ctx.arc(200, 336, 33, 0, 2*Math.PI);
ctx.fillStyle = '#FEDE4A';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 345, 8, 0, 2*Math.PI);
ctx.fillStyle = '#7A674D';
ctx.fill();
ctx.moveTo(200, 353);
ctx.lineTo(200, 369);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(168, 330);
ctx.bezierCurveTo(140, 320, 258, 320, 233, 330);
ctx.quadraticCurveTo(200, 325, 168, 330);
ctx.fillStyle = '#FEDE4A';
ctx.fill();
ctx.stroke();
// 身体
ctx.beginPath();
ctx.moveTo(40, 375);
ctx.quadraticCurveTo(50, 335, 80, 311);
ctx.lineTo(322, 311);
ctx.quadraticCurveTo(350, 335, 360, 375);
ctx.fillStyle = '#029AE3';
ctx.fillRect(40, 375, 310, 20);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(44, 414, 41, 0, 2*Math.PI);
ctx.fillStyle = '#FDFDFD'; ctx.fill();
ctx.stroke(); ctx.beginPath();
ctx.arc(356, 414, 41, 0, 2*Math.PI);
ctx.fillStyle = '#FDFDFD';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(80, 340);
ctx.quadraticCurveTo(70, 400, 96, 510);
ctx.quadraticCurveTo(145, 520, 200, 515);
ctx.quadraticCurveTo(255, 520, 304, 510);
ctx.quadraticCurveTo(330, 400, 320, 340);
ctx.fillStyle = '#029AE3';
ctx.fill();
ctx.stroke();
// 袋子
ctx.beginPath();
ctx.moveTo(100, 401);
ctx.bezierCurveTo(78, 266, 320, 267, 300, 401);
ctx.bezierCurveTo(290, 510, 110, 510, 100, 401);
ctx.fillStyle = '#FDFDFD';
ctx.fill(); ctx.moveTo(116, 391);
ctx.bezierCurveTo(125, 485, 283, 485, 284, 391);
ctx.quadraticCurveTo(200, 380, 116, 391);
ctx.stroke();
// 脚
ctx.beginPath();
ctx.moveTo(96, 510);
ctx.bezierCurveTo(70, 510, 63, 519, 62, 539);
ctx.bezierCurveTo(57, 561, 163, 564, 200, 551);
ctx.bezierCurveTo(237, 564, 343, 561, 338, 539);
ctx.bezierCurveTo(337, 519, 330, 510, 304, 510);
ctx.fillStyle = '#FDFDFD';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200, 497);
ctx.lineTo(200, 551);
ctx.moveTo(190, 497);
ctx.lineTo(210, 497);
ctx.stroke();
完成哈哈哈哈
