Canvas API
Canvas API 通过 JavaScript 和 HTML 的 <canvas> 元素提供了一种绘图方法。除其他功能外，它还可以用于动画、游戏图形、数据可视化、照片处理和实时视频处理。
Canvas API 主要侧重于 2D 图形。同样使用 <canvas> 元素的 WebGL API 可以绘制硬件加速的 2D 和 3D 图形。
基本示例
这个简单的示例在 canvas 上绘制了一个绿色矩形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
Document.getElementById() 方法获取对 HTML <canvas> 元素的引用。接下来，HTMLCanvasElement.getContext() 方法获取该元素的上下文——用于渲染图形的对象。
实际绘图是使用 CanvasRenderingContext2D 接口完成的。fillStyle 属性将矩形填充为绿色。fillRect() 方法将其左上角放置在 (10, 10) 处，并将其尺寸设置为宽 150 像素，高 100 像素。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
结果
参考
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2D实验性ImageBitmapRenderingContext实验性
注意： 与 WebGLRenderingContext 相关的接口在 WebGL 下引用。
注意： OffscreenCanvas 也可在 Web Workers 中使用。
CanvasCaptureMediaStreamTrack 是一个相关的接口。
指南和教程
- Canvas 教程
-
一个全面的教程，涵盖 Canvas API 的基本用法及其高级功能。
- HTML5 Canvas 深度解析
-
一本动手实践的、篇幅适中的 Canvas API 和 WebGL 入门书籍。
- Canvas 手册
-
Canvas API 的便捷参考。
- 使用 canvas 操作视频
库
Canvas API 功能强大，但并非总是易于使用。以下库可以使创建基于 canvas 的项目更快、更容易。
- EaselJS 是一个开源 canvas 库，可以轻松创建游戏、生成艺术和其他高度图形化的体验。
- Fabric.js 是一个具有 SVG 解析功能的开源 canvas 库。
- heatmap.js 是一个用于创建基于 canvas 的数据热力图的开源库。
- JavaScript InfoVis Toolkit 可创建交互式数据可视化。
- Konva.js 是一个适用于桌面和移动应用的 2D canvas 库。
- p5.js 具有一套完整的 canvas 绘图功能，适用于艺术家、设计师、教育工作者和初学者。
- Phaser 是一个快速、免费且有趣的开源框架，用于支持 Canvas 和 WebGL 的浏览器游戏。
- Pts.js 是一个用于在 canvas 和 SVG 中进行创意编码和可视化的库。
- Rekapi 是一个用于 Canvas 的动画关键帧 API。
- Scrawl-canvas 是一个用于创建和操作 2D canvas 元素的开源 JavaScript 库。
- ZIM 框架在 canvas 上提供了便利、组件和控件，用于创意编码——包括可访问性和数百个色彩鲜艳的教程。
- Sprig 是一个初学者友好、开源、基于瓦片的 Sprig 是一款对初学者友好的开源、基于瓦片的游戏开发库，它使用 Canvas。
注意： 请参阅 WebGL API 以了解使用 WebGL 的 2D 和 3D 库。
规范
| 规范 |
|---|
| HTML # the-canvas-element |
浏览器兼容性
加载中…