canvas元素

我们可以在<canvas>元素中绘制画布图形。你可以通过设置width与height属性来确定画布尺寸（单位为像素）。

新的画布是空的，意味着它是完全透明的，看起来就像文档中的空白区域一样。

<canvas>标签允许多种不同风格的绘图。要获取真正的绘图接口，首先我们要创建一个能够提供绘图接口的方法的上下文（context）。目前有两种得到广泛支持的绘图接口：用于绘制二维图形的"2d"与通过openGL接口绘制三维图形的"webgl"。

本书只讨论二维图形，而不讨论 WebGL。但是如果你对三维图形感兴趣，我强烈建议大家自行深入研究 WebGL。它提供了非常简单的现代图形硬件接口，同时你也可以使用 JavaScript 来高效地渲染非常复杂的场景。

您可以用getContext方法在<canvas> DOM 元素上创建一个上下文。

  1. <p>Before canvas.</p>
  2. <canvas width="120" height="60"></canvas>
  3. <p>After canvas.</p>
  4. <script>
  5.   let canvas = document.querySelector("canvas");
  6.   let context = canvas.getContext("2d");
  7.   context.fillStyle = "red";
  8.   context.fillRect(10, 10, 100, 50);
  9. </script>

在创建完context对象之后，作为示例，我们画出一个红色矩形。该矩形宽 100 像素，高 50 像素，它的左上点坐标为(10,10)。

与 HTML（或者 SVG）相同，画布使用的坐标系统将(0,0)放置在左上角，并且y轴向下增长。所以(10,10)是相对于左上角向下并向右各偏移 10 像素的位置。