HTML+CSS源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5 canvas哆啦A梦机器猫图形代码</title><style type="text/css">canvas{margin:50px auto; display: block;}</style></head><body><canvas width="400" height="600" id="canvas"></canvas><script type="text/javascript">window.onload=function(){var cxt=document.getElementById('canvas').getContext('2d');cxt.beginPath();cxt.lineWidth=1;cxt.strokeStyle="black";cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);var head = cxt.createRadialGradient(260,25,8,200,175,175);head.addColorStop(0,"white");head.addColorStop(1,"#16B3DC");cxt.fillStyle=head;cxt.fill();cxt.stroke();//脸框cxt.beginPath();cxt.fillStyle="white";cxt.moveTo(110,110);cxt.quadraticCurveTo(-10,200,120,315);cxt.lineTo(280,315);cxt.quadraticCurveTo(410,210,290,110);cxt.lineTo(110,110);cxt.fill();cxt.stroke();//眼睛cxt.beginPath();cxt.lineWidth=1;cxt.fillStyle="white";cxt.moveTo(110,100);cxt.bezierCurveTo(110,25,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.arc(200,165,25,0,2*Math.PI);var radial = cxt.createRadialGradient(212,155,3,200,165,25);radial.addColorStop(0,"white");radial.addColorStop(1,"#D05823");cxt.fillStyle=radial;cxt.fill();cxt.stroke();//眼珠cxt.beginPath();cxt.fillStyle="black";doraemon(cxt,230,130);cxt.fill();cxt.stroke();cxt.beginPath();cxt.fillStyle="black";doraemon(cxt,170,130);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.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);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);var neck = cxt.createLinearGradient(96,316,305,316);neck.addColorStop(0,"#B13209");neck.addColorStop(1,"white");cxt.fillStyle=neck;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.bezierCurveTo(185,505,215,505,215,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='white';cxt.arc(32,438,32,0,2*Math.PI);cxt.fill();cxt.stroke();//右手掌cxt.beginPath();cxt.fillStyle='white';cxt.arc(368,438,32,0,2*Math.PI);cxt.fill();cxt.stroke();//肚兜cxt.beginPath();cxt.fillStyle="white";cxt.arc(200,399,90,1.8*Math.PI,1.2*Math.PI);cxt.fill();cxt.stroke();cxt.beginPath();cxt.moveTo(130,399);cxt.lineTo(270,399);cxt.bezierCurveTo(270,489,130,489,130,399);cxt.stroke();//胸前铃铛cxt.beginPath();cxt.arc(200,358,28,0,2*Math.PI);var neck = cxt.createRadialGradient(220,340,0,200,358,30);neck.addColorStop(0,"white");neck.addColorStop(1,"#F1EB55");cxt.fillStyle=neck;cxt.fill();cxt.stroke();cxt.beginPath();cxt.moveTo(178,340);cxt.lineTo(222,340);cxt.moveTo(173,349);cxt.lineTo(226,349);cxt.moveTo(200,367);cxt.lineTo(200,387);cxt.stroke();cxt.beginPath();cxt.fillStyle="black";cxt.arc(200,363,8,0,2*Math.PI);cxt.fill();cxt.stroke();//左脚cxt.beginPath();cxt.moveTo(85,528),cxt.lineTo(75,528),cxt.bezierCurveTo(50,528,50,562,75,562);cxt.lineTo(185,562);cxt.bezierCurveTo(204,562,204,528,185,528);cxt.stroke();//右脚cxt.beginPath();cxt.moveTo(215,528),cxt.bezierCurveTo(196,528,196,562,215,562);cxt.lineTo(325,562);cxt.bezierCurveTo(345,562,345,528,325,528);cxt.lineTo(315,528);cxt.stroke();}function doraemon(cxt,x,y){cxt.arc(x,y,12,0,2*Math.PI);}// doraemon();</script><div style="text-align:center;"></div></body></html>
效果图如下：
代码参考源码之家
