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()这个绘制贝塞尔曲线的方法，真的很难把控那个弧度~如果大家有更好更容易理解的方法，请多多指教哈~
