Edit in JSFiddle

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}

var ctx = canvas.getContext("2d");
drawSector();
drawHollowSector();
drawCircle();
drawHollowCircle();

function drawSector() {
    ctx.save();
    ctx.beginPath();
    ctx.arc(100, 80, 70, 0,- Math.PI / 2, true);
    ctx.fillStyle = "#CCC";
    ctx.fill();
    ctx.restore();
}

function drawHollowSector() {
    ctx.save();
    ctx.beginPath();
    ctx.arc(280, 80, 70, 0,- Math.PI / 2, true);
    ctx.strokeStyle = "#CCC";
    ctx.stroke();
    ctx.restore();
}

function drawCircle() {
    ctx.save();
    ctx.beginPath();
    ctx.arc(100, 220, 70, 0, Math.PI * 2, true);
    ctx.fillStyle = "#CCC";
    ctx.fill();
    ctx.restore();
}

function drawHollowCircle() {
    ctx.save();
    ctx.beginPath();
    ctx.arc(280, 220, 70, 0, Math.PI * 2, true);
    ctx.strokeStyle = "#CCC";
    ctx.stroke();
    ctx.restore();
}

<canvas id="myCanvas" width="440" height="300">
    您的浏览器不支持canvas!
</canvas>