canvas画doraemon

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();

完成哈哈哈哈