代码实现多啦A梦效果图

浅浅的花香味﹌ 2023-06-10 07:28 3阅读 0赞

**HTML+CSS源码如下：**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/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>

**效果图如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

**代码参考源码之家**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20230531/f1b7954b56c2478a815c0dc25ce529d0.png