canvas 实现会动眼睛的企鹅

来源：互联网发布：mac怎么安装软件编辑：程序博客网时间：2024/05/01 21:59

参考代码：http://www.108js.com/article/article7/70037.html?id=193

整理了下代码，多加了点注释。。。

其中用到了三次贝塞尔曲线（暂时不太理解，等理解了再专门来解释）

代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>眼睛会动的企鹅</title><style>body{ background:#000;}#drawing{ background:#817936;}#drawing p{ text-align:center; line-height:50px; width:500px; height:500px; font-size:16px; color:#F00;}</style></head><body><canvas id="drawing" width="500" height="500"><p>你的浏览器不支持canvas，请换一个支持的谷歌或者火狐</p></canvas><script type="text/javascript">window.onload=function() {var drawing=document.getElementById('drawing');if(drawing.getContext){var context=drawing.getContext("2d");//先画头context.beginPath();context.arc(250,120,100,0,Math.PI*2,true);context.closePath();context.fill();//画眼睛var eyeL_l = 285;var eyeL_t = 75;var eyeR_l = 225;var eyeR_t = 75;      BezierEllipse2(context,220,70,20,30,"fill","#fff");      //眼框  BezierEllipse2(context,280,70,20,30,"fill","#fff");      //眼框  //BezierEllipse2(context,eyeL_l,eyeL_t,10,15,"fill","#000");      //右眼珠子  //BezierEllipse2(context,eyeR_l,eyeR_t,10,15,"fill","#000");      //左眼珠子  BezierEllipse2(context,250,150,40,15,"fill","#f58220");   //嘴  BezierEllipse2(context,210,135,40,15,"fill","#000");    //嘴遮罩                BezierEllipse2(context,290,135,40,15,"fill","#000");    //嘴遮罩  BezierEllipse2(context,170,450,50,20,"fill","#f58220");   //左脚  BezierEllipse2(context,330,450,50,20,"fill","#f58220");   //右脚  BezierEllipse2(context,120,240,50,20,"fill","#000");   //左胳膊  BezierEllipse2(context,390,240,50,20,"fill","#000");   //右胳膊  BezierEllipse2(context,70,240,20,20,"fill","#fff");   //左手  BezierEllipse2(context,440,240,20,20,"fill","#fff");   //右手  BezierEllipse2(context,250,310,150,140,"fill","#000");   //肚子  BezierEllipse2(context,250,320,140,120,"fill","#fff");   //肚子  document.onmousemove = function(e){  var e = e||event;  var e_l = e.clientX-drawing.offsetLeft;  var e_t = e.clientY-drawing.offsetTop;  this.title = e_l+'______'+e_t;  if(e_l>273&&e_l<288){  eyeL_l = e_l;  }else if(e_l< 273){  eyeL_l = 273;  }else{  eyeL_l = 288;  }  if(e_l>212&&e_l<228){  eyeR_l = e_l;  }else if(e_l< 212){  eyeR_l = 212;  }else{  eyeR_l = 228;  }  if(e_t>60&&e_t< 80){  eyeL_t = e_t;  }else if(e_t< 60){  eyeL_t = 60;  }else{  eyeL_t = 80;  }            BezierEllipse2(context,220,70,20,30,"fill","#fff");      //眼框     BezierEllipse2(context,280,70,20,30,"fill","#fff");      //眼框     BezierEllipse2(context,eyeL_l,eyeL_t,10,15,"fill","#000");      //眼珠子     BezierEllipse2(context,eyeR_l,eyeL_t,10,15,"fill","#000");      //眼珠子 }}}function BezierEllipse2(ctx, x, y, a, b,type,color){var k =0.5522848,            ox = a * k, // 水平控制点偏移量   oy = b * k; // 垂直控制点偏移量   ctx.beginPath();   //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线   ctx.moveTo(x - a, y);   ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);   ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);   ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);   ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);   ctx.closePath();   if(type=="stroke"){   ctx.strokeStyle=color;   ctx.stroke();   }else{   ctx.fillStyle=color;   ctx.fill()   }   }   </script>   </body>   </html>

结果图：

0 0