Html5 Canvas 功能的索引使用

Created: November-22, 2018

画布的功能

Canvas 允许你以编程方式绘制到你的网页：

画布图纸可以广泛设计：

画布的用途

图纸可以组合并定位在画布上的任何位置，因此可用于创建：

油漆/草图应用，
快节奏的互动游戏，
数据分析，如图表，图表，
像 Photoshop 一样的成像，
类似 Flash 的广告和华丽的网络内容。

Canvas 允许你操作图像的红色，绿色，蓝色和 Alpha 组件颜色。这允许画布操作具有类似于 Photoshop 的结果的图像。

在像素级别重新着色图像的任何部分（如果使用 HSL，你甚至可以在保留重要的光照和饱和度的同时重新着色图像，因此结果看起来不像是某人在图像上拍了一些油漆），
敲除图像中某个人/项目周围的背景，
检测和填充图像的一部分（例如，将用户点击的花瓣的颜色从绿色变为黄色 - 只需点击花瓣！），
做透视翘曲（例如在杯子的曲线周围包裹图像），
检查图像的内容（例如，面部识别），
回答有关图像的问题：停车位的这张图片中是否有停放的车？
应用标准图像滤镜（灰度，棕褐色等）
应用你可以想象的任何异国情调的图像滤镜（Sobel Edge Detection），
合并图像。如果亲爱的祖母苏无法与家人团聚，只需将 photoshop 她带入团圆的形象。不喜欢考辛菲尔 - 只是“把他拉出来，
播放视频/从视频中抓取一帧，
将画布内容导出为 .jpg | .png 图像（你甚至可以选择裁剪或注释图像并将结果导出为新图像），

关于移动和编辑画布图纸（例如创建动作游戏）：

在画布上绘制某些内容后，无法移动或编辑现有图形。画布图可移动这种常见的误解值得澄清： 现有的画布图不能编辑或移动！
画布绘制速度非常快。Canvas 可以在几分之一秒内绘制数百个图像，文本，线条和曲线。它在可用时使用 GPU 来加速绘图。
画布通过快速重复绘制某些东西然后将其重新绘制到新位置来创建运动的幻觉。像电视一样，这种不断的重绘会让人眼前一亮。