runsly CSS+DIV 2021-07-19

用Canvas的arc函数绘制圆和图形

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<circlesCount;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布尔值