arc

2023年08月11日

柏拉文

越努力，越幸运

一、认识

---

ctx.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

二、语法

---

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

• x: 圆弧中心（圆心）的 x 轴坐标。

• y: 圆弧中心（圆心）的 y 轴坐标。

• radius: 圆弧的半径。

• startAngle: 圆弧的起始点，x 轴方向开始计算，单位以弧度表示。

• endAngle: 圆弧的终点，单位以弧度表示。

• anticlockwise: 可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

三、场景

---

3.1 圆

填充

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector("#canvas");
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.arc(50,50,50,0,4*Math.PI);
    ctx.fill();
</script>

轮廓

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.stroke();
</script>

3.2 4/1 圆

填充

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.arc(100,100,50,0,0.5*Math.PI,false);
    ctx.fill();
</script>

轮廓

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.arc(100,100,50,0,0.5*Math.PI,false);
    ctx.stroke();
</script>

3.3 1/2 圆

填充

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.arc(100,100,50,0,0.5*Math.PI,false);
    ctx.fill();
</script>

轮廓

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.arc(100,100,50,0,1*Math.PI,false);
    ctx.stroke();
</script>

3.4 3/4 圆

填充

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.arc(100, 100, 50, 0, 0.5 * Math.PI, true);

    等同于

    ctx.arc(100, 100, 50, 0, 1.5 * Math.PI, false);
    ctx.fill();
</script>

轮廓

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.arc(100,100,50,0,1.5*Math.PI,false);

    等同于 

    ctx.arc(100,100,50,0,0.5*Math.PI,true);
    ctx.stroke();
</script>