Canvas入门实例04：画一个笑脸

本文通过画一个笑脸示例canvas弧线的用法

Canvas画弧线的基本方法如下：

 

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

 其中：

  x 代表圆心横坐标

  y 代表圆心纵坐标

  radius 代表弧半径

  startAngle 代表起始弧度

  endAngle 代表结束弧度

  anticlockwise 代表弧的方向，true为逆时针，false为顺时针

 

下面来画这个笑脸：

 

function drawScreen(){
  var context = theCanvas.getContext('2d');
  
  context.strokeStyle = 'black';
  context.lineWidth = 5;
  
  // 1) 画最外围的圆，即整个脸
  context.beginPath();
  context.arc(100, 100, 50, 0, 2*Math.PI, false);
  context.stroke();
  context.closePath();
  
  // 2) 画嘴巴，这是一个半圆，因为是下半圆，所以要顺时针画
  context.beginPath();
  context.arc(100, 100, 30, 0, Math.PI, false);
  context.stroke();
  context.closePath();
  
  // 3) 画右眼，这是一个填充圆，使用 fill() 方法
  context.beginPath();
  context.arc(80, 80, 5, 0, 2*Math.PI, false);
  context.fill();
  context.closePath();
  
  // 4) 模仿第三步，画左眼
  context.beginPath();
  context.arc(120, 80, 5, 0, 2*Math.PI, false);
  context.fill();
  context.closePath();
}

 Okay，画弧很简单吧？但是该方法确实也很强大！