代码改变世界

绘制可爱的一对火柴人

2014-09-12 09:24  tingting4133  阅读(621)  评论(0)  编辑  收藏  举报 
  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()这个绘制贝塞尔曲线的方法，真的很难把控那个弧度~如果大家有更好更容易理解的方法，请多多指教哈~