<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>
