在现代 Web 开发中，Canvas 和 SVG 是广泛使用的两种绘图技术。它们都提供了一种在 Web 页面上呈现图形的方式，但是它们背后的实现方式、用法和适用场景都不尽相同。在本篇博客中，我们将讨论 Canvas 和 SVG 的相关知识，并提供它们的使用教程。
Canvas
Canvas 是一个 HTML5 元素，它提供了一种基于像素的方式来绘制图形。它支持直接绘制 2D 图形，包括线条、矩形、圆形、弧形、文本和图像等等。Canvas 被广泛用于以动态方式生成图像，动态图表、数据可视化和游戏开发等领域。
创建 Canvas 元素
首先，我们需要在 HTML 文档中创建一个 Canvas 元素。我们可以使用以下代码创建一个 Canvas 元素：
<canvas id="myCanvas" width="500" height="500"></canvas>
这个代码创建了一个 Canvas 元素并将其 ID 设置为 “myCanvas”。该元素具有一个宽度为 500 像素和一个高度为 500 像素的默认大小。我们可以使用 CSS 样式表来修改 Canvas 元素的样式，例如设置宽度和高度等属性。
绘制图形
一旦我们创建了 Canvas 元素，就可以使用 JavaScript 在其中进行绘制。Canvas API 是非常强大而且丰富的，可以绘制各种形状，调整颜色和样式，以及添加文本和图像等等。以下是一些基本的绘图操作：
// 在 Canvas 上绘制直线
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 200);
context.stroke();
// 在 Canvas 上绘制矩形
context.beginPath();
context.rect(50, 50, 100, 100);
context.fillStyle = "red";
context.fill();
// 在 Canvas 上绘制圆形
context.beginPath();
context.arc(250, 250, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
// 在 Canvas 上绘制文本
context.font = "30px Arial";
context.fillText("Hello, Canvas!", 50, 100);
// 在 Canvas 上绘制图像
var image = new Image();
image.src = "myImage.png";
image.onload = function() {
context.drawImage(image, 0, 0);
}
高级绘图
除了基本的图形操作之外，Canvas API 还支持一些高级绘图功能。例如，我们可以使用贝塞尔曲线绘制平滑的曲线：
// 在 Canvas 上绘制贝塞尔曲线
context.beginPath();
context.moveTo(0, 0);
context.bezierCurveTo(100, 50, 200, 50, 300, 0);
context.strokeStyle = "green";
context.stroke();
我们还可以创建渐变对象和阴影效果，以增强图形的可视化效果：
// 创建两种颜色的线性渐变
var gradient = context.createLinearGradient(0, 0, 500, 500);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
// 绘制一个矩形并应用渐变
context.beginPath();
context.rect(50, 50, 400, 400);
context.fillStyle = gradient;
context.fill();
// 应用阴影效果
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
SVG
与 Canvas 不同，SVG 是一种基于矢量图形的绘图技术，它使用 XML 标记语言来定义图形和元素。使用 SVG，我们可以创建可缩放的图形，这意味着我们可以缩放图形而不会失去其清晰度和细节。SVG 适用于以静态方式显示的图形，例如图标、数字图表、矢量图等等。
创建 SVG 元素
与 Canvas 不同，我们不需要特别的标记来定义 SVG 元素，而是使用普通的 HTML 标记。以下代码段创建了一个 SVG 元素：
<svg id="mySvg" width="500" height="500"></svg>
类似于 Canvas，我们可以使用 CSS 样式表来修改 SVG 元素的样式，例如设置宽度、高度等属性以及图形样式等属性。
绘制图形
与 Canvas 不同，SVG 是基于矢量图形的，它定义了哪些形状和元素可以在其中绘制。SVG 支持直接绘制形状、文本和图像等等。以下是一些基本的绘图操作：
<!-- 在 SVG 上绘制直线 -->
<svg width="500" height="500">
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2"/>
</svg>
<!-- 在 SVG 上绘制矩形 -->
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" fill="red"/>
</svg>
<!-- 在 SVG 上绘制圆形 -->
<svg width="500" height="500">
<circle cx="250" cy="250" r="50" fill="blue"/>
</svg>
<!-- 在 SVG 上绘制文本 -->
<svg width="500" height="500">
<text x="50" y="100" font-size="30" font-family="Arial">Hello, SVG!</text>
</svg>
<!-- 在 SVG 上绘制图像 -->
<svg width="500" height="500">
<image href="myImage.png" x="0" y="0" width="500" height="500"/>
</svg>
高级绘图
与 Canvas 相似，SVG 还支持一些高级绘图功能，包括图形变换、渐变、滤镜等等。例如，我们可以使用矩阵变换来旋转、缩放或平移形状：
<!-- 在 SVG 上绘制旋转的矩形 -->
<svg width="500" height="500">
<rect x="50" y="50" width="100" height="100" fill="red">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>
我们还可以创建各种类型的渐变效果，例如线性渐变和径向渐变：
<!-- 在 SVG 上绘制渐变矩形 -->
<svg width="500" height="500">
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="400" height="400" fill="url(#myGradient)"/>
</svg>
总结
Canvas 和 SVG 都是用于在 Web 页面上绘制图形的技术。Canvas 提供了一种基于像素的方式来绘制图形，适用于动态生成的图像、动态图表、数据可视化和游戏开发等领域。SVG 是一种基于矢量图形的技术，它使用 XML 标记语言来定义图形和元素，适用于以静态方式显示的图形，例如图标、数字图表、矢量图等等。我们可以使用 Canvas API 和 SVG 元素来绘制各种形状、文本和图像，并应用各种高级绘图功能来增强图形的可视化效果。