canvas(id="canvas" width="500" height="150")
View Compiled
var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
  ctx.moveTo(110,75);
  ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
  ctx.moveTo(65,65);
  ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
  ctx.moveTo(95,65);
  ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
  ctx.stroke();
  
  // 无moveTo则展现完整路径
  ctx.beginPath();
  ctx.strokeStyle="red";
  ctx.arc(175,75,50,0,Math.PI*2,true); // 绘制
  //ctx.moveTo(210,75);
  ctx.arc(175,75,35,0,Math.PI,false);   // 口(顺时针)
  //ctx.moveTo(165,65);
  ctx.arc(160,65,5,0,Math.PI*2,true);  // 左眼
  //ctx.moveTo(195,65);
  ctx.arc(190,65,5,0,Math.PI*2,true);  // 右眼
  ctx.stroke();
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.