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(100,110,50,0,Math.PI);

ctx.closePath();

ctx.fill();

//绘制上半圆

ctx.beginPath();

ctx.arc(100,90,50,0,Math.PI,true);

ctx.closePath();

ctx.fill();

//绘制左半圆

ctx.beginPath();

ctx.arc(230,100,50, Math.PI/2,Math.PI*3/2);

ctx.closePath();

ctx.fill();

//绘制右半圆

ctx.beginPath();

ctx.arc(250, 100, 50 , Math.PI*3/2, Math.PI/2);

ctx.closePath();

ctx.fill();

// 绘制一个接近于圆的形状

ctx.beginPath();

ctx.arc(180, 240, 50 , Math.PI*7/6, Math.PI*2/3);

ctx.closePath();

ctx.fill();

// 绘制一段小圆弧

ctx.beginPath();

ctx.arc(150, 250, 50 , Math.PI*7/6, Math.PI*2/3, true);

ctx.closePath();

ctx.fill();

我们已经在arc函数中使用不同startAngle和endAngle参数来绘制6个不同的圆弧形状。这些圆弧形状演示了arc函数是如何工作的。

让我们回头看一下角度与弧度之间的关系并关注于上半圆，上半圆开始于角度0并结束于角度π，并从逆时针方向绘制圆弧。如果我们看一下圆，它看起就下图这样的图形。

如果需要从210°开始到120°结束，顺时钟进行绘制，将会得到如下图所示的圆弧

将画圆功能封装成函数

将原来用来画圆的代码放到一个函数中，然后使用for循环在Canvas上随机绘制出5个圆

function drawCircle(ctx, x, y, radius) {

ctx.fillStyle = "rgba(200, 200, 100, .9)";

ctx.beginPath();

ctx.arc(x, y, radius, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

}

$(function(){

var canvas = document.getElementById("game");

var ctx = canvas.getContext("2d");

var circleRadius = 10;

var width = canvas.width;

var height = canvas.height;

// random 5 circles

var circlesCount = 5;

for (var i=0;i

var x = Math.random()*width;

var y = Math.random()*height;

drawCircle(ctx, x, y, circleRadius);

}

});

在JavaScript中，可以使用Math.random()函数生成随机数。

random函数没有参数。它总是返回0~1之间的一个浮点数，这个数大于等于0且小于1。

有两种常用的方式来使用random函数。一种是在给定范围内生成随机数。另一种是生成true或false布尔值