首页 > 代码库 > 绘制可爱的一对火柴人
绘制可爱的一对火柴人
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <style type="text/css"> 7 body { 8 padding: 0; 9 margin: 0; 10 } 11 #myCanvas1{ 12 position: absolute; 13 top: 30px; 14 left: 273px 15 } 16 </style> 17 18 </head> 19 20 <body> 21 <canvas id="myCanvas" width="1000" height="500" style="background:#666"></canvas> 22 <canvas id="myCanvas1" width="200" height="200"></canvas> 23 </body> 24 <script type="text/javascript"> 25 var a = document.getElementById("myCanvas"); 26 var ctx = a.getContext("2d"); 27 var canvas = document.getElementById("myCanvas1"); 28 var ctx1 = canvas.getContext("2d"); 29 30 function draw(id) { 31 if (canvas == null) 32 return false; 33 ctx1.beginPath(); 34 ctx1.moveTo(75, 40); 35 ctx1.bezierCurveTo(75, 37, 70, 25, 50, 25); 36 ctx1.bezierCurveTo(20, 25, 22, 62.5, 22, 55); 37 ctx1.bezierCurveTo(20, 80, 40, 102, 75, 120); 38 ctx1.bezierCurveTo(110, 102, 130, 80, 128, 55); 39 ctx1.bezierCurveTo(128, 55, 130, 25, 100, 25); 40 ctx1.bezierCurveTo(85, 25, 75, 37, 75, 40); 41 var gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 150); 42 gradient.addColorStop(0, "rgba(244,28,285,0.5)"); 43 gradient.addColorStop(1, "rgba(255,255,255,1)"); 44 ctx1.fillStyle = gradient; 45 ctx1.fill(); 46 } 47 48 draw(ctx1); 49 50 // ------------开始绘制脸--------- 51 ctx.beginPath(); 52 ctx.arc(400, 35, 25, 0, Math.PI * 2, true); 53 ctx.fillStyle = "#000"; 54 ctx.fill(); 55 56 // ----------------开始绘制脸蛋-------- 57 ctx.beginPath(); 58 ctx.strokeStyle = "#fff"; 59 ctx.lineWidth = 3; 60 ctx.arc(400, 37, 15, 0, Math.PI, false); 61 ctx.stroke() 62 63 // ------开始绘制眼睛-------------- 64 ctx.beginPath(); 65 ctx.fillStyle = "#fff" 66 67 // Left eye 68 ctx.arc(390, 30, 4, 0, Math.PI * 2, true); 69 ctx.fill() 70 // ctx.moveTo(413, 30); 71 72 // Right eye 73 ctx.arc(410, 30, 4, 0, Math.PI * 2, true); 74 ctx.fill() 75 76 // -------绘制身体------------ 77 ctx.beginPath(); 78 ctx.fillStyle = "#fff"; 79 ctx.fillRect(398, 60, 3, 70); 80 // -------绘制胳膊--------------- 81 82 ctx.beginPath(); 83 ctx.moveTo(350, 100); //移动画笔 84 ctx.lineTo(400, 70); 85 ctx.moveTo(420, 100); 86 ctx.lineTo(400, 70); 87 ctx.strokeStyle = ‘#fff‘; 88 ctx.stroke(); 89 90 // -------绘制脚------------ 91 ctx.beginPath(); 92 ctx.moveTo(380, 150); //移动画笔 93 ctx.lineTo(400, 130); 94 ctx.moveTo(420, 150); 95 ctx.lineTo(400, 130); 96 ctx.strokeStyle = ‘#fff‘; 97 ctx.stroke(); 98 99 100 ctx.stroke();101 ctx.beginPath(); //开始新的路径102 ctx.arc(300, 35, 25, 0, Math.PI * 2, true);103 ctx.fillStyle = ‘#fff‘;104 ctx.fill();105 //绘制笑脸106 ctx.beginPath();107 ctx.strokeStyle = ‘#c00‘;108 ctx.lineWidth = 3;109 ctx.arc(300, 37, 15, 0, Math.PI, false);110 ctx.stroke();111 //绘制眼睛112 ctx.beginPath();113 ctx.fillStyle = ‘#c00‘;114 //绘制左眼115 ctx.arc(310, 30, 4, 0, Math.PI * 2, true);116 ctx.fill();117 ctx.moveTo(183, 30);118 //绘制右眼119 ctx.arc(290, 30, 4, 0, Math.PI * 2, true);120 ctx.fill();121 // ctx.stroke(); //加粗眼睛的厚度122 //绘制身体123 //ctx.beginPath();124 ctx.fillStyle = ‘#fff‘;125 ctx.fillRect(298, 55, 3, 70);126 127 //绘制胳膊128 ctx.beginPath();129 ctx.moveTo(350, 100); //移动画笔130 ctx.lineTo(300, 70);131 ctx.moveTo(278, 100);132 ctx.lineTo(300, 70);133 ctx.strokeStyle = ‘#fff‘;134 ctx.stroke();135 //绘制脚136 // ctx.beginPath();137 ctx.moveTo(318, 150);138 ctx.lineTo(300, 125);139 ctx.moveTo(278, 150);140 ctx.lineTo(300, 125);141 ctx.strokeStyle = ‘#fff‘;142 ctx.stroke();143 </script>144 145 </html>
无意间在一篇文章里看到火柴人，于是访着仿着做出这么一对“浪漫情侣”哈~里面涉及到的方法包括有方法有很多，尤其是bezierCurveTo()这个绘制贝塞尔曲线的方法，真的很难把控那个弧度~如果大家有更好更容易理解的方法，请多多指教哈~
绘制可爱的一对火柴人
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。