Canvas API

这个简单的示例在画布上绘制一个绿色矩形。

Document.getElementById() 方法获取对 HTML <canvas> 元素的引用。接下来， HTMLCanvasElement.getContext() 方法获取该元素的上下文——将绘制图像的元素。

实际的绘制工作使用 CanvasRenderingContext2D 接口完成。 fillStyle 属性使矩形呈绿色。 fillRect() 方法将它的左上角放置在 (10, 10) 处，并使其大小为 150 个单位宽，100 个单位高。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• OffscreenCanvas
• Path2D 实验性
• ImageBitmapRenderingContext 实验性

CanvasCaptureMediaStreamTrack 是一个相关的接口。

Canvas 教程

涵盖 Canvas API 的基本用法及其高级功能的综合教程。

HTML5 Canvas 深入研究

一个动手实践的、篇幅较长的 Canvas API 和 WebGL 入门指南。

Canvas 手册

Canvas API 的便捷参考。

使用 canvas 操作视频

组合 <video> 和 <canvas> 以实时操作视频数据。

Canvas API 非常强大，但并不总是易于使用。下面列出的库可以使基于 canvas 的项目创建更快、更容易。

• EaselJS 是一个开源的 canvas 库，可以轻松创建游戏、生成艺术和其他高度图形化的体验。
• Fabric.js 是一个具有 SVG 解析功能的开源 canvas 库。
• heatmap.js 是一个用于创建基于 canvas 的数据热图的开源库。
• JavaScript InfoVis Toolkit 创建交互式数据可视化。
• Konva.js 是一个用于桌面和移动应用程序的 2D canvas 库。
• p5.js 为艺术家、设计师、教育工作者和初学者提供了完整的 canvas 绘制功能。
• Paper.js 是一个运行在 HTML Canvas 之上的开源矢量图形脚本框架。
• Phaser 是一个快速、免费且有趣的开源框架，用于基于 Canvas 和 WebGL 的浏览器游戏。
• Pts.js 是一个用于在 canvas 和 SVG 中进行创意编码和可视化的库。
• Rekapi 是 Canvas 的动画关键帧 API。
• Scrawl-canvas 是一个用于创建和操作 2D canvas 元素的开源 JavaScript 库。
• ZIM 框架为在画布上进行创意编码提供了便利、组件和控件——包括无障碍性和数百个彩色教程。
• Sprig 是一个使用 Canvas 的易于上手的、开源的、基于平铺的游戏开发库。

• WebGL