html5 多啦a梦,canvas实现哆啦A梦效果

//获取页面元素

var canvas = document.getElementById('abc');

//获取渲染上下文

var con = canvas.getContext('2d');

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//绘制头部背景

con.beginPath();

con.fillStyle = 'rgb(8,189,234)';

con.strokeStyle = 'black';

con.lineWidth = 2;

con.arc(300, 300, 200, 0, Math.PI * 2, false);

con.stroke();

con.fill();

//绘制脸

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

con.beginPath();

con.moveTo(300, 180);

con.bezierCurveTo(100, 180, 60, 450, 300, 465);

con.bezierCurveTo(540, 450, 500, 180, 300, 180);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制右眼

con.beginPath();

con.moveTo(262, 145);

con.bezierCurveTo(212, 145, 212, 245, 262, 245);

con.bezierCurveTo(312, 245, 312, 145, 262, 145);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制左眼

con.beginPath();

con.moveTo(338, 145);

con.bezierCurveTo(388, 145, 388, 245, 338, 245);

con.bezierCurveTo(288, 245, 288, 145, 338, 145);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制左眼珠

con.beginPath();

con.arc(280, 220, 10, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'black';

con.fill();

//绘制右眼珠

con.beginPath();

con.arc(320, 220, 10, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'black';

con.fill();

//绘制鼻子

con.beginPath();

con.arc(300, 256, 23, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = '#c93e00';

con.fill();

//绘制鼻子上的反光圆

con.beginPath();

con.arc(309, 246, 4, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.fill();

//左边胡子

con.beginPath();

con.moveTo(165, 270);

con.lineTo(235, 285);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(165, 310);

con.lineTo(235, 310);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(165, 350);

con.lineTo(235, 340);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//右边胡子

con.beginPath();

con.moveTo(435, 270);

con.lineTo(365, 285);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(435, 310);

con.lineTo(365, 310);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(435, 350);

con.lineTo(365, 340);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//鼻线

con.beginPath();

con.moveTo(300, 280);

con.lineTo(300, 435);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//嘴巴

con.beginPath();

con.moveTo(185, 375);

con.quadraticCurveTo(220, 435, 300, 435)

con.strokeStyle = 'black';

con.stroke();

con.beginPath();

con.moveTo(300, 435);

con.quadraticCurveTo(380, 435, 415, 370)

con.strokeStyle = 'black';

con.stroke();

//下半身

//左边手

con.beginPath();

con.lineWidth = 60;

con.moveTo(200, 470);

con.lineTo(100, 600);

con.strokeStyle = 'rgb(8,189,234)';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.arc(90, 610, 35, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.stroke();

con.fill();

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//右边手

con.beginPath();

con.lineWidth = 60;

con.moveTo(400, 470);

con.lineTo(500, 600);

con.strokeStyle = 'rgb(8,189,234)';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.arc(510, 610, 35, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.stroke();

con.fill();

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

//腿

con.fillStyle = 'rgb(8,189,234)';

con.fillRect(150, 485, 300, 250);

//肚子

con.beginPath();

con.fillStyle = 'white';

con.arc(300, 560, 100, 0, Math.PI * 2, false);

con.fill();

//腿岔

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.fillStyle = 'white';

con.arc(300, 710, 20, 0, Math.PI * 2, false);

con.stroke();

con.fill();

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//脚

con.beginPath();

con.lineCap = 'round';

con.lineWidth = 50;

con.strokeStyle = 'white';

con.moveTo(150, 730);

con.lineTo(274, 730);

con.stroke();

con.closePath();

con.beginPath();

con.lineCap = 'round';

con.lineWidth = 50;

con.strokeStyle = 'white';

con.moveTo(324, 730);

con.lineTo(450, 730);

con.stroke();

con.closePath();

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

//渐变色

var linGradient = con.createLinearGradient(140, 475, 465, 475);

linGradient.addColorStop(0, 'rgb(182,50,11)');

linGradient.addColorStop(1, 'rgb(255,255,255)');

//项链

con.beginPath();

con.lineWidth = 40;

con.lineCap = 'round';

con.moveTo(150, 475);

con.lineTo(450, 475);

con.strokeStyle = linGradient;

con.stroke();

con.closePath();

//铃铛

con.beginPath();

con.lineWidth = 2;

con.arc(300, 510, 35, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'rgb(243,247,115)';

con.fill();

con.beginPath();

con.lineWidth = 1;

con.moveTo(276, 485);

con.lineTo(324, 485);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.moveTo(265, 500);

con.lineTo(334, 500);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.fillStyle = 'black';

con.arc(300, 515, 10, 0, Math.PI * 2, false);

con.fill();

con.beginPath();

con.strokeStyle = 'black';

con.moveTo(300, 525);

con.lineTo(300, 545);

con.stroke();

con.closePath();

//口袋

con.beginPath();

con.strokeStyle = 'black';

con.arc(300, 565, 75, 0, Math.PI, false);

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(225, 565);

con.lineTo(375, 565);

con.stroke();

con.closePath();