杰的博客

Appearance

Canvas ​

Canvas API 提供了一个通过 JavaScript 和 HTML 的<canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

canvas 基本用法 ​

渲染上下文（The rendering context） ​

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于 OpenGL ES 的 3D 上下文 ("experimental-webgl") 。

canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型。对于 2D 图像而言，如本教程，你可以使用 CanvasRenderingContext2D。

js
var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

绘制矩形 ​

js
function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
  • fillRect 方法会填充一个矩形。
  • clearRect 方法会清空一个矩形。
  • strokeRect 方法会绘制一个矩形边框。
    • 矩形参数：
    • x: 矩形左上角的 x 坐标。
    • y: 矩形左上角的 y 坐标。
    • width: 矩形的宽度。
    • height: 矩形的高度。
    • 矩形参数的坐标是相对于画布左上角的。

绘制路径 ​

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。 然后你使用画图命令去画出路径。 之后你把路径封闭。 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

  • beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
  • closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。
  • stroke() 通过线条来绘制图形轮廓。
  • fill() 通过填充路径的内容区域生成实心的图形。

线 ​

绘制直线，需要用到的方法 lineTo()。

lineTo(x, y) 绘制一条从当前位置到指定 x 以及 y 位置的直线。

该方法有两个参数：x 以及 y，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，以此类推。开始点也可以通过 moveTo()函数改变。

js
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style type="text/css">
    body {
      background-color: #ccc;
    }

    #canvas {
      margin-top: 100px;
      margin-left: 100px;
      border: 1px solid black;
    }
  </style>
</head>

<body onload="draw();">
  <canvas id="canvas" width="150" height="150"></canvas>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        // 填充三角形
        ctx.beginPath();
        ctx.moveTo(25, 25);
        ctx.lineTo(105, 25);
        ctx.lineTo(25, 105);
        ctx.fill();

        // 描边三角形
        ctx.beginPath();
        ctx.moveTo(125, 125);
        ctx.lineTo(125, 45);
        ctx.lineTo(45, 125);
        ctx.closePath();
        ctx.stroke();
      }

    }
  </script>
</body>

</html>

圆弧 ​

绘制圆弧或者圆，我们使用 arc()方法。当然可以使用 arcTo()，不过这个的实现并不是那么的可靠。

arc(x, y, radius, startAngle, endAngle, anticlockwise) ​

画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。

该方法有六个参数：

  • x,y 为绘制圆弧所在圆上的圆心坐标。
  • radius 为半径。
  • startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。
  • anticlockwise 为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。

备注： arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的 js

js
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.stroke();

arcTo(x1, y1, x2, y2, radius) ​

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。