canvas
元素
我们可以在<canvas>
元素中绘制画布图形。你可以通过设置width
与height
属性来确定画布尺寸(单位为像素)。
新的画布是空的,意味着它是完全透明的,看起来就像文档中的空白区域一样。
<canvas>
标签允许多种不同风格的绘图。要获取真正的绘图接口,首先我们要创建一个能够提供绘图接口的方法的上下文(context)。目前有两种得到广泛支持的绘图接口:用于绘制二维图形的"2d"
与通过openGL接口绘制三维图形的"webgl"
。
本书只讨论二维图形,而不讨论 WebGL。但是如果你对三维图形感兴趣,我强烈建议大家自行深入研究 WebGL。它提供了非常简单的现代图形硬件接口,同时你也可以使用 JavaScript 来高效地渲染非常复杂的场景。
您可以用getContext
方法在<canvas>
DOM 元素上创建一个上下文。
<p>Before canvas.</p>
<canvas width="120" height="60"></canvas>
<p>After canvas.</p>
<script>
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 100, 50);
</script>
在创建完context
对象之后,作为示例,我们画出一个红色矩形。该矩形宽 100 像素,高 50 像素,它的左上点坐标为(10,10)。
与 HTML(或者 SVG)相同,画布使用的坐标系统将(0,0)
放置在左上角,并且y
轴向下增长。所以(10,10)
是相对于左上角向下并向右各偏移 10 像素的位置。