HTML5的Canvas元素能做什么？如何绘制基本图形？-html教程-PHP中文网

HTML5的Canvas元素能做什么？如何绘制基本图形？

幻夢星雲

发布： 2025-07-09 18:00:02

原创

377人浏览过

canvas和svg的主要区别在于canvas基于像素，适合大量图形处理和像素控制，而svg基于矢量，适合可缩放图形和交互。1. canvas是位图，缩放可能失真；2. svg是矢量图，缩放不失真；3. canvas需手动管理状态，无内置对象模型；4. svg有dom结构，便于交互；5. canvas适合游戏、数据可视化；6. svg适合图标、地图等需交互的场景。选择时应根据需求权衡性能与交互性。

HTML5的Canvas元素能做什么？如何绘制基本图形？

HTML5 Canvas 元素本质上是一个画布，你可以在上面使用 JavaScript 绘制各种图形、图像，甚至可以做动画和简单的游戏。它提供了一个强大的绘图 API，但需要 JavaScript 代码来驱动。

Canvas 元素本身并不具备绘图能力，它只是一个容器。绘图操作是通过 JavaScript 来实现的。

Canvas 的优势和局限性

Canvas 的优势在于它的灵活性和像素级别的控制。你可以精确地控制每一个像素，实现各种复杂的视觉效果。它也适合处理大量图形元素的场景，比如数据可视化。

立即学习“前端免费学习笔记（深入）”；

但 Canvas 的缺点也很明显：它是一个基于像素的绘图系统，这意味着绘制出来的图形是位图，缩放时可能会失真。此外，Canvas 没有内置的对象模型，你需要自己维护图形的状态和交互逻辑。相比之下，SVG (Scalable Vector Graphics) 是基于矢量的，缩放不会失真，并且有完整的 DOM 结构，更容易进行交互。选择 Canvas 还是 SVG，取决于你的具体需求。

绘制基本图形：一步一步来

首先，在 HTML 中添加 Canvas 元素：

<canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

登录后复制

注意要设置 width 和 height 属性，否则 Canvas 可能不会正确显示。

然后，在 JavaScript 中获取 Canvas 元素和绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取 2D 绘图上下文

登录后复制

getContext('2d') 返回一个 CanvasRenderingContext2D 对象，它提供了各种绘图方法。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

接下来，就可以开始绘制图形了。

绘制矩形：

ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 80); // 绘制一个填充的矩形，(x, y, width, height)
ctx.strokeStyle = 'blue'; // 设置边框颜色
ctx.strokeRect(160, 50, 100, 80); // 绘制一个空心矩形

登录后复制

fillRect() 方法绘制一个填充的矩形，strokeRect() 方法绘制一个空心矩形。

绘制圆形：

ctx.beginPath(); // 开始一个新的路径
ctx.arc(300, 100, 40, 0, 2 * Math.PI); // 绘制一个圆，(x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆形
ctx.closePath(); // 结束路径

登录后复制

arc() 方法用于绘制弧线，Math.PI 表示 π，2 * Math.PI 表示一个完整的圆。beginPath() 和 closePath() 用于定义一个独立的路径，防止之前的样式影响到新的图形。

绘制直线：

ctx.beginPath();
ctx.moveTo(50, 200); // 移动到起始点
ctx.lineTo(200, 250); // 绘制一条线到 (200, 250)
ctx.strokeStyle = 'black';
ctx.lineWidth = 3; // 设置线条宽度
ctx.stroke(); // 绘制线条
ctx.closePath();

登录后复制

moveTo() 方法用于移动画笔到起始点，lineTo() 方法用于绘制一条线到指定的点。

这些只是 Canvas 绘图的基本方法。通过组合这些方法，你可以绘制出各种复杂的图形。

如何优化 Canvas 性能？

Canvas 性能优化是一个比较复杂的话题，主要涉及到以下几个方面：

减少重绘： 尽量避免不必要的重绘。只在需要更新的部分进行重绘。可以使用 requestAnimationFrame 来控制重绘频率，避免过度消耗 CPU 资源。
离屏 Canvas： 对于复杂的图形，可以先在离屏 Canvas 上绘制，然后再将离屏 Canvas 绘制到主 Canvas 上。这样可以减少主 Canvas 的重绘次数。
缓存： 将静态内容缓存起来，避免每次都重新绘制。可以使用 Canvas 的 toDataURL() 方法将 Canvas 内容转换为图像数据，然后缓存起来。
简化图形： 尽量简化图形的复杂度，减少绘制的计算量。
硬件加速： 确保浏览器开启了硬件加速。
避免浮点数： 尽量使用整数坐标，避免浮点数运算。

Canvas 和 SVG 的主要区别是什么？如何选择？

Canvas 和 SVG 是 Web 开发中两种常用的绘图技术，它们各有优缺点，适用于不同的场景。

Canvas： 基于像素的绘图系统。绘制出来的图形是位图，缩放时可能会失真。没有内置的对象模型，需要自己维护图形的状态和交互逻辑。适合处理大量图形元素的场景，比如数据可视化、游戏。
SVG： 基于矢量的绘图系统。绘制出来的图形是矢量图，缩放不会失真。有完整的 DOM 结构，更容易进行交互。适合绘制简单的图形、图标、地图。

选择 Canvas 还是 SVG，取决于你的具体需求：