Randysheng

# Shapes

# Rectangle

Canvas 中绘制矩形，我们需要使用 rect() 方法，其中传入参数：矩形左上角的坐标，矩形的宽度和矩形的高度。也使用 fillRect() 来绘制填充的矩形，或者使用 strokeRect() 来绘制边框矩形。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Rectangle</title>
  </head>
  <body>
    <canvas id="container" width="578" height="200"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.rect(10, 10, 200, 100);
      ctx.fillStyle = "red";
      ctx.fill();

      ctx.beginPath();
      ctx.rect(10, 120, 200, 100);
      ctx.strokeStyle = "red";
      ctx.stroke();

      ctx.beginPath();
      ctx.fillStyle = "red";
      ctx.fillRect(10, 230, 200, 100);

      ctx.beginPath();
      ctx.strokeStyle = "red";
      ctx.strokeRect(10, 340, 200, 100);
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Circle

Canvas 中绘制圆，我们需要使用 arc() 方法，其中传入的参数：中心点坐标、圆弧半径、起始点（弧度）、终点（弧度）以及绘制方向（顺时针或逆时针）。只要将起始点设置为0，终点设置为2π就能绘制出一个圆。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Circle</title>
  </head>
  <body>
    <canvas id="container" width="578" height="200"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      const r = 70;

      ctx.beginPath();
      ctx.arc(x, y, r, 0, 2 * Math.PI, false);
      ctx.fillStyle = "green";
      ctx.fill();
      ctx.lineWith = 5;
      ctx.strokeStyle = "#003300";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Semicircle

Canvas 中绘制半圆，我们需要使用 arc() 方法，其中传入的参数：中心点坐标、圆弧半径、起始点（弧度）、终点（弧度）以及绘制方向（顺时针或逆时针）。只要将终点设置为起始点的基础上 + π 就可以了。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Semicircle</title>
  </head>
  <body>
    <canvas id="container" width="578" height="200"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      const r = 70;

      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI, false);
      // 闭合路径
      ctx.closePath();
      ctx.fillStyle = "green";
      ctx.fill();
      ctx.lineWith = 5;
      ctx.strokeStyle = "#003300";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Custom Shape

如今我们可以使用各种 Canvas 中的方法，例如：lineTo()，arcTo()，quadraticCurveTo()或者bezierCurveTo()等，来绘制各式各样的图形，注意有时候需要使用 closePath() 方法来形成一个封闭的图形。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Custom Shape</title>
  </head>
  <body>
    <canvas id="container" width="578" height="200"></canvas>
    <script>
      const canvas = document.getElementById('container');
      const ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(170, 80);
      ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      ctx.bezierCurveTo(320, 5, 250, 120, 250, 50);
      ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.strokeStyle = "blue";
      ctx.stroke();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

← Fill Style →