canvas学习笔记5 绘制圆弧
绘制圆弧
知识点：arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。
1、这里的度数表示弧度
2、0弧度是指X轴正方向
3、角度转换弧度 radians=（Math.PI/180）*degress
具体小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制圆弧</title>
</head>
<style type="text/css">
canvas{
border: 1px solid #FF0000;
}
</style>
<body>
<div>绘制圆弧的方式一、、</div>
<canvas id="randian" width="300" height="500"></canvas>
</body>
<script type="text/javascript">
function draw(){
1、获取canvas对象
var canvas=document.getElementById("randian");
2、判断能都创建对象，不能直接跳出
If(!canvas.getContext) return;
3、创建canvas对象
var ctx=canvas.getContext("2d")
4、开始绘制路径
ctx.beginPath()
5、设置关于圆弧的圆心、半径、开始弧度、结束弧度、方向
ctx.arc(100,100,0,Math.PI/2,false)
6、开始绘制
ctx.shroke()
//7、新建一条路径
ctx.beginPath()
//8、设置圆弧的圆心，半径，已经开始弧度、结束弧度、方向
ctx.arc(150,150,50,5,Math.PI/2,false)
//9、绘制实心的圆弧
ctx.fill()
}
//10、调用函数
draw()
</script>
</html>
如图所示：
