28 绘制圆弧
1 角度与弧度的js表达式
radians=(Math.PI/180)*degrees
2 arc
语法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,
按照anticlockwise给定的方向(默认为顺时针)来生成。
ture:逆时针
false:顺时针
x,y为绘制圆弧所在圆上的圆心坐标
radius为半径
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准
参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
解析
示例
<head>
<meta charset="UTF-8">
<title>07_绘制圆弧</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas,请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.arc(100,100,50,0*Math.PI,2*Math.PI);
ctx.stroke();
}
</script>
</body>
效果
3 arcTo在画布上创建介于两个切线之间的弧
语法
arcTo(x1, y1, x2, y2, radius)在画布上创建介于两个切线之间的弧/曲线
解析
相当于一个半径为50的圆弧与直线1,直线2两两相切所形成的圆弧
示例
<head>
<meta charset="UTF-8">
<title>07_绘制圆弧</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas,请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
ctx.arcTo(200,50,200,100,50);
ctx.lineTo(200,120);
ctx.stroke();
}
</script>
</body>
效果