Canvas学习笔记（三）曲线图形-CFANZ编程社区

在Canvas曲线图形中，我们主要学习圆形、弧形、二次贝塞尔曲线、三次贝塞尔曲线。

圆形

在Canvas中，我们使用arc()方法来绘制圆形。语法：

ctx.beginPath();
ctx.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
ctx.closePath();

说明：首先必须要先调用beginPath()方法声明“开始绘制一个新的路径”，然后才可以开始绘制圆形。调用arc()方法绘制圆后，还需要调用closePath()方法来关闭当前路径。beginPath()方法和closePath()方法一般是配合使用的。 x表示圆心的横坐标，y表示圆心的纵坐标。开始角度和结束角度都是以弧度为单位。180度应该写成Math.PI。 anticlockwise表示绘制方向，为true时表示按逆时针方向绘制，为false时表示按顺时针方向绘制。

“描边”圆

语法：

ctx.beginPath();
ctx.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
ctx.closePath();
ctx.strokeStyle = "颜色值";
ctx.stroke();

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>描边圆</title>
  </head>
  <body>
    <canvas id="canvas" width="200" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        // 半圆
        ctx.beginPath();
        ctx.arc(80, 80, 50, 0, 180 * (Math.PI / 180), true);
        ctx.closePath();
        ctx.strokeStyle = "HotPink";
        ctx.stroke();

        // 整圆
        ctx.beginPath();
        ctx.arc(120, 80, 50, 0, 360 * (Math.PI / 180), true);
        ctx.closePath();
        ctx.strokeStyle = "HotPink";
        ctx.stroke();
      };
    </script>
  </body>
</html>

效果图如下所示：

“填充”圆

语法：

ctx.beginPath();
ctx.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
ctx.closePath();
ctx.fillStyle = "颜色值";
ctx.fill();

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>填充圆</title>
  </head>
  <body>
    <canvas id="canvas" width="200" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        // 半圆
        ctx.beginPath();
        ctx.arc(80, 80, 50, 0, 180 * (Math.PI / 180), true);
        ctx.closePath();
        ctx.fillStyle = "HotPink";
        ctx.fill();

        // 整圆
        ctx.beginPath();
        ctx.arc(120, 80, 50, 0, 360 * (Math.PI / 180), true);
        ctx.closePath();
        ctx.fillStyle = "#9966FF";
        ctx.fill();
      };
    </script>
  </body>
</html>

效果如下图所示：

弧线

在Canvas中，arc()不仅可以用来画圆，还可以用来画弧线。语法：

ctx.beginPath();
ctx.arc(x, y, 半径, 开始角度, 结束角度, anticlockwise);
ctx.strokeStyle = "颜色值";
ctx.stroke();

使用arc()画弧线与arc()画描边圆最大的不同之处在于：arc()画弧线不使用closePath()来关闭路径。示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>弧线</title>
  </head>
  <body>
    <canvas id="canvas" width="200" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        ctx.beginPath();
        ctx.arc(80, 80, 50, 0, -90 * (Math.PI / 180), true);
        ctx.stroke();
      };
    </script>
  </body>
</html>

效果如下图所示：