Canvas没有circle函数来画一个圆。在Canvas绘图API中,提供了一个函数来绘制不同的弧,包括圆。arc函数可接受以下参数,具体说明参见表
把角度转换为弧度
arc函数使用的angle参数指的是radian(弧度)而不是degree(角度)。如果原来习惯于使用角度,那么就需要在把angle参数值传入arc函数之前将角度值转换成弧度值。可以用下面的公式来转换角度单位:
Radians = π/180 X degrees
下图用角度和弧度两种单位显示了一些常用的角度值。在Canvas中绘制圆弧时,该图指明了角度值的位置,还能帮助我们很容易地选择起点角度与终点角度参数
用arc函数绘制不同的圆弧
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
ctx.filSytle = "rgba(200,200,100,0.6)";
//绘制下半圆
ctx.beginPath();
ctx.arc(10