canvas系列二：canvas中级篇
一、绘制矩形
【总结】绘制矩形的几种方法
- context对象.strokeRect
- context对象.fillRect
- context对象.rect
- rect方法就是矩形路径，还需要使用fill或stroke才可以看到效果，因此一般使用strokeRect或fillRect直接可以看到结果。
【1】绘制矩形框
语法：
context对象.strokeRect(x,y,width,height)
参数说明：
前两个参数表示绘制矩形的左上角的坐标，后两个参数表示这个矩形的宽高。
使用该方法不需要使用moveTo方法设置起始点也不需要调用stroke等绘画方法。
绘制的矩形支持strokeStyle设置颜色样式。
【2】绘制填充矩形
语法:
context对象.fillRect(x,y,width,height)
参数说明：
前两个参数表示绘制矩形的左上角的坐标，后两个参数表示这个矩形的宽高。
使用该方法不需要使用moveTo方法设置起始点也不需要调用stroke等绘画方法。
绘制的矩形支持fillStyle设置颜色样式。
【3】清除矩形区域
语法：
context对象.clearRect(x,y,width,height)
参数说明：
参数 x, y 表示矩形区域左上角的坐标，width 与 height 表示矩形区域的宽高。
用于清除画布中的矩形区域的内容。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="canvas" width="800" height="800">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制矩形
ctx.strokeStyle = 'red';
ctx.strokeRect(10,10,200,100);
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.fillRect(300,300,200,100);
ctx.clearRect(350,350,50,50);
</script>
</body>
</html>二、绘制圆
【1】绘制圆弧
语法：
context对象.arc( x,y,radius,startAngle,endAngle,anticlockwise)
context对象.arcTo()
参数描述：
前两个参数 x, y 表示绘制圆弧的圆心坐标。
参数 radius 表示圆弧半径，单位为弧度。
参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度，顺时针为正方向。
参数 anticlockwise 表示是否采用默认的正向角度，如果传入 true 表示逆指针为正。该参数可选。
使用arc绘图的时候,若没有设置moveTo，那么会从开始绘弧的地方作为起始点，若设置了moveTo,那么会连线该点与圆弧的起点。
如果使用stroke方法, 那么会从开始连线到圆弧的起始位置。如果是fill方法,会自动闭合路径填充。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制圆弧</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制圆弧
ctx.arc(300,300,100,Math.PI/2,Math.PI);
ctx.stroke();
</script>
</body>
</html>【2】绘制扇形
绘制扇形的重点是需要设置起始位置为圆心点, 然后闭合路径即可。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制扇形</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制扇形
ctx.moveTo(300,300);
ctx.arc(300,300,100,Math.PI/2,Math.PI);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>【3】绘制扇形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制扇形动画</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
//第三步、绘制扇形动画
var x = 500;
var y = 500;
var r = 100;
var startAngle = -Math.PI/2;
var angle = startAngle;
var s = setInterval(function(){
ctx.clearRect( 0, 0, canvas.width, canvas.height );
angle += 0.1;
if(angle >= Math.PI*3/2){
clearInterval(s);
angle = Math.PI * 3 / 2;
console.log('动画绘制完成');
}
ctx.moveTo(x,y);
ctx.arc(x,y,r,startAngle,angle);
ctx.fill();
},50);
</script>
</body>
</html>【4】绘制饼形图
绘制饼形图最大的特点是角度是叠加的。
开始从-Math.PI/2开始绘制,达到执行角x后,下一个区域从x开始绘制, 然后有到一个角y停下来。如此反复到 Math.PI * 3 / 2 结束。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制饼状图</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
<script type="text/javascript">
//第一步、获取canvas对象
var canvas = document.querySelector('#canvas');
//第二步、获取上下文
var ctx = canvas.getContext('2d');
//第三步、绘制饼状图
var x = 300;
var y = 300;
var r = 100;
var start = -Math.PI/2;
var step = Math.PI*2/3;
var color = ['red','orange','yellow'];
for(var i = 0;i < 3;i++){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.fillStyle = color[i];
ctx.arc(x,y,r,start,start+=step);
ctx.fill();
}
</script>
</body>
</html>