canvas元素

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

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

<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 像素的位置。