Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/Canvas_API below:

Canvas API - Web API

Baseline Widely available

Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用 <canvas> 元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

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

<canvas id="canvas"></canvas>

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);

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：为在 canvas 上进行创意代码编写提供便利性以及相关组件和控件的框架，包括无障碍和数百个色彩缤纷的教程。
• Sprig：使用 Canvas 实现的基于图块的游戏的开发库，适合初学者并且开源。

备注： 与 WebGL 有关的 2D 和 3D 的库请参见 WebGL API。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4