HTML中canvas深入解析与使用示例

HTML5 中的 <canvas> 元素是一种用于绘制图形的 HTML 元素。借助 JavaScript，开发者可以在 canvas 上进行绘制各种图形，如直线、矩形、圆形、曲线、渐变、文本和图像等。本文将详细介绍 canvas 的基础用法及其绘制技术，并通过实例进行解释。

一、Canvas 基础知识

<canvas> 元素本身只是一个容器，实际的绘制工作是通过 JavaScript 的 CanvasRenderingContext2D 对象完成的。绘图操作都是针对这个 2D 上下文进行的。

1.1 基本结构

在 HTML 中，canvas 元素的使用非常简单，代码结构如下：

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  // 在这里进行绘制
</script>

通过 getContext('2d')，我们获取了 2D 绘图上下文 (ctx)，后续的所有绘图操作都是通过这个上下文对象完成的。

1.2 Canvas 坐标系统

Canvas 使用的坐标系统是以左上角为原点 (0, 0)，向右为 X 轴正方向，向下为 Y 轴正方向。所有绘制操作都基于这个坐标系统。

二、Canvas 绘制基本元素

2.1 直线 (Canvas Line)

绘制直线需要用到 beginPath()、moveTo() 和 lineTo() 等方法，然后通过 stroke() 进行描边。

示例：绘制一条从 (50, 50) 到 (250, 250) 的直线

ctx.beginPath();
ctx.moveTo(50, 50);   // 起点
ctx.lineTo(250, 250); // 终点
ctx.stroke();         // 描边绘制

2.2 矩形 (Canvas Rectangle)

绘制矩形有两种方式：

使用 fillRect(x, y, width, height) 绘制实心矩形。
使用 strokeRect(x, y, width, height) 绘制矩形的边框。

示例：绘制一个矩形

// 绘制实心矩形
ctx.fillStyle = "blue"; // 设置填充颜色
ctx.fillRect(100, 100, 150, 100);

// 绘制矩形边框
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeRect(300, 100, 150, 100);

2.3 圆形 (Canvas Circle)

Canvas 没有专门绘制圆形的方法，但我们可以通过 arc() 函数绘制。arc(x, y, radius, startAngle, endAngle, anticlockwise) 是绘制圆弧的主要方法。

示例：绘制一个圆形

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // x, y 是圆心坐标，50 是半径，0 到 2π 是整个圆
ctx.fillStyle = "green";
ctx.fill(); // 填充圆
ctx.stroke(); // 描边圆

2.4 曲线 (Canvas Curve)

Canvas 提供两种绘制曲线的方式：

使用 quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线。
使用 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线。

示例：绘制一条二次贝塞尔曲线

ctx.beginPath();
ctx.moveTo(50, 150); // 起点
ctx.quadraticCurveTo(150, 50, 250, 150); // 控制点和终点
ctx.stroke(); // 描边绘制

2.5 渐变 (Canvas Gradient)

Canvas 支持两种类型的渐变：

线性渐变 createLinearGradient(x0, y0, x1, y1)
径向渐变 createRadialGradient(x0, y0, r0, x1, y1, r1)

示例：创建一个从左到右的线性渐变矩形

var gradient = ctx.createLinearGradient(50, 50, 250, 50);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

2.6 文本 (Canvas Text)

在 Canvas 中可以使用 fillText() 或 strokeText() 绘制文本。

示例：绘制一段文本

ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello, Canvas!", 100, 50);

2.7 图像 (Canvas Image)

我们可以使用 drawImage() 在 Canvas 上绘制图像，支持从 HTML 的 <img> 标签中加载图像或通过 URL 引入图像。

示例：绘制一个图像

<img id="myImage" src="path_to_image.jpg" style="display:none;"/>
<script>
var img = document.getElementById('myImage');
ctx.drawImage(img, 10, 10, 200, 150); // 在 Canvas 上绘制图像
</script>

三、Canvas 综合实例

以下示例将综合运用前面介绍的基本元素，在 Canvas 上绘制一幅含有线条、矩形、圆形、渐变和文本的图形。

<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制背景矩形
ctx.fillStyle = "lightgray";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(450, 50);
ctx.stroke();

// 绘制圆形
ctx.beginPath();
ctx.arc(250, 200, 100, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();
ctx.stroke();

// 绘制渐变矩形
var gradient = ctx.createLinearGradient(50, 350, 450, 350);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "purple");
ctx.fillStyle = gradient;
ctx.fillRect(50, 300, 400, 50);

// 绘制文本
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Canvas Example", 150, 100);
</script>