arc 绘制一个圆

arc(x, y, radius, startAngle, endAngle, anticlockwise)
x, y : 圆心  设置圆的 圆心在 canvas 中的坐标 以这个坐标画圆
radius : 半径
startAngle : 开始
endAngle : 结束
anticlockwise : 方向 默认顺时针
<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext('2d');
// x,y  100 的坐标为圆心 画一个半径为 50 的圆
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);  //结束点  Math.PI * 2  R = 圆周长
//给圆填充一个边框线
ctx.stroke();
</script>

半圆

<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
// x,y  100 的坐标为圆心 画一个半径为 50 的半圆
ctx.arc(100, 100, 50, 0, Math.PI, false);  //结束点  Math.PI  R = 圆周长
//给圆填充一个边框线
ctx.fill();
</script>

笑脸

<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2); // 绘制头
ctx.stroke();

ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI);   // 
ctx.stroke();

ctx.beginPath();
ctx.arc(60,65,5,0,Math.PI*2);  // 左眼
ctx.stroke();

ctx.beginPath();
ctx.arc(90,65,5,0,Math.PI*2);  // 右眼
ctx.stroke();
</script>