Edit in JSFiddle

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var r = 100;
cxt.moveTo(0, r);
for (var i = 0; i <= 2 * r; i++)
cxt.lineTo(i, r - Math.pow(r * r - (r - i) * (r - i), 1 / 2))
cxt.moveTo(0, r);
for (var i = 0; i <= 2 * r; i++)
cxt.lineTo(i, r + Math.pow(r * r - (r - i) * (r - i), 1 / 2))
cxt.stroke();

<canvas id="myCanvas" width="480" height="300" style="border:1px
        solid #c3c3c3;margin:10px;">
        你的浏览器不支持html5，请使用火狐或者chrome浏览器
</canvas>