Canvas 按路径绘制圆弧 - Canvas 基础教程

圆弧，就是以某个点 (x0,y0) 作为圆心(红色)，以两个角度作为起始(startAngle)和结束角度(enddAngle)，绘制的一定大小(radius) 的半圆

如果开始角度为 0 ，而结束角度为 2 * Math.PI ，那么就是一个圆了

Canvas 中的 2D 渲染上下文文提供了 arc() 方法用于绘制圆弧

arc() 方法

arc() 用于绘制圆弧，圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数	说明
x	圆弧中心（圆心）的 x 轴坐标
y	圆弧中心（圆心）的 y 轴坐标
radius	圆弧的半径
startAngle	圆弧的起始点， x轴方向开始计算，单位以弧度表示
endAngle	圆弧的终点，单位以弧度表示
anticlockwise	可选， bool 类型，如果为 true，逆时针绘制圆弧，反之，顺时针绘制，默认为 false

注意： arc() 方法绘制出来的是虚拟路径，需要使用 stroke() 实体化

范例

下面的代码以 (100,100) 作为圆心, 绘制一个半径为 50 的圆弧，圆弧的起始角度为 30，结束角度为 75

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#9013FE"
ctx.beginPath();
ctx.arc(100,100,50,30 * Math.PI /180,75 * Math.PI /180 );
ctx.stroke();
</script>

运行结果如下

绘制圆

下面的代码以 (100,100) 作为圆心, 绘制一个半径为 50 的圆

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#9013FE"
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
</script>

运行结果如下