HTML | 画布基础知识

HTML 画布（Canvas）是 HTML5 中新增的元素，它为开发者提供了一套2D渲染操作的API，可以呈现出类似于 Flash 的效果。HTML 画布非常适合用来绘制一些交互式的动态图形。

基础概念

在开始之前，需要掌握一些基础概念：

• 画布（Canvas）：是 HTML 中用于绘制图像的容器元素。
• 上下文（Context）：由于画布是不可见的，需要通过上下文对象来操作画布。
• 像素（Pixel）：画布中最小的元素。HTML 中，默认情况下一像素等于一个物理像素。
• 坐标系（Coordinate System）：画布使用的坐标系与普通的坐标系略有不同。原点（0,0）在左上角，x轴向右，y轴向下。
• 路径（Path）：在画布上绘制图形时，需要定义路径。路径主要由线条和曲线组成。

绘制基础图形

了解了基础概念之后，我们就可以开始绘制一些基础图形。下面是一些常见的绘制方法：

矩形

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

其中，fillStyle 属性表示填充颜色，fillRect() 方法用于绘制实心矩形。以上代码将会在画布上画出一个左上角坐标为(10,10)，宽度为50，高度为50的红色矩形。

圆形

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2);
ctx.fill();

arc() 方法可以用来绘制圆形，beginPath() 方法则用于开启一个新的路径。以上代码将会在画布上画出一个以圆心坐标为(75,75)，半径为50的绿色圆形。

直线

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

moveTo() 方法用于设置线条的起点，lineTo() 方法用于设置线条的终点。以上代码将会在画布上画出一条起点坐标为(50,50)，终点坐标为(100,100)的蓝色直线。

高级用法

除了基础图形外，画布还有很多高级用法，例如渐变、阴影、图案填充等。同时，由于画布是一个二维平面，我们还可以对它进行转换、裁剪、像素操作等操作。这里不再一一列举，需要读者在实践中慢慢体会。

总结

以上就是 HTML 画布的基础知识，包括了绘制基础图形以及高级用法。需要注意的是，画布的性能消耗较大，不适合绘制过于复杂的图形。若需要绘制大量复杂的图形，可以考虑使用 SVG 或者 Canvas 2D 库。