<html>
<head>
<title></title>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
</body>
</html>
<script type="text/javascript">
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// 畫弧
// ctx.arc( 圓心x軸坐標，圓心y軸坐標，半徑, 起點弧度，結束點弧度，是否逆時針畫(可選) )
// 角度需要轉化成弧度公式
function angleToRadian(angle) {
return Math.PI / 180 * angle;
}
// 順時針畫一半圓弧
ctx.arc(100, 100, 50, angleToRadian(-90), angleToRadian(90))
ctx.strokeStyle = 'deepskyblue'
ctx.stroke()
// 畫扇形和弧的區別: 首先要移動到圓點，結束時要閉合路徑
ctx.beginPath();
ctx.moveTo(200, 200)
ctx.arc(200, 200, 50, angleToRadian(-90), angleToRadian(90));
ctx.strokeStyle = 'deepskyblue';
ctx.closePath();
ctx.stroke();
</script>
