HTML5帆布用途

这个元素比其他技术有优势

HTML5包含一个名为CANVAS的令人兴奋的元素。 它有很多用途,但为了使用它,你需要学习一些JavaScript,HTML,有时候还需要CSS。

这使得CANVAS元素对于许多设计师来说有点令人望而生畏,实际上,大多数人可能会忽略这个元素,除非有可靠的工具在不知道JavaScript的情况下创建CANVAS动画和游戏。

什么HTML5画布用于

HTML5 CANVAS元素可以用于很多以前的事情,您必须使用像Flash这样的嵌入式应用程序来生成:

实际上,人们使用CANVAS元素的主要原因是将简单的网页转换为动态网页应用程序变得容易,然后将该应用程序转换为移动应用程序以用于智能手机和平板电脑。

如果我们有Flash,为什么我们需要画布?

根据HTML5规范,CANVAS元素是:

“......一个依赖于分辨率的位图画布,可用于即时渲染图形,游戏图形,艺术或其他视觉图像。”

CANVAS元素允许您实时在网页上绘制图形,图形,游戏,艺术作品和其他视觉效果。

您可能认为我们已经可以使用Flash来做到这一点,但是CANVAS和Flash之间有两个主要区别:

即使您从未计划使用Flash,画布也很有用

CANVAS元素如此混乱的主要原因之一是许多设计师已经习惯于完全静态的网页。 图片可能是动画的,但这是用GIF完成的,当然你可以将视频嵌入到页面中,但是再次,这是一个静态视频,它只是坐在页面上,可能由于交互而启动或停止,但仅此而已。

CANVAS元素允许您为网页添加更多的交互性,因为现在您可以使用脚本语言动态地控制图形,图像和文本。 CANVAS元素可帮助您将图像,照片,图表和图形转换为动画元素。

何时考虑使用画布元素

在决定是否使用CANVAS元素时,您的受众应该是您的首要考虑事项。

如果受众主要使用Windows XP和IE 6,7或8,那么创建动态画布功能将变得毫无意义,因为这些浏览器不支持它。

如果您正在构建仅用于Windows机器的应用程序,那么Flash可能是您最好的选择。 在Windows和Mac电脑上使用的应用程序可以从Silverlight应用程序中受益。

但是,如果您的应用程序需要在移动设备(包括Android和iOS)以及现代台式计算机(更新至最新浏览器版本)上进行查看,那么使用CANVAS元素是一个不错的选择。

请记住,使用此元素可以为不支持它的旧版浏览器提供后备选项,例如静态图像。

但是,不建议使用HTML5画布进行所有操作。 您不应该将它用于您的标志,标题或导航等内容(尽管使用它来制作任何这些内容的一部分都可以)。

根据规范,您应该使用最适合您正在尝试构建的元素。 因此,使用HEADER元素以及图像和文本优于用于标题和徽标的CANVAS元素。

另外,如果您正在创建打算在非交互式介质(如打印)中使用的网页或应用程序,则应该意识到已经动态更新的CANVAS元素可能无法按预期打印。 您可能会打印当前内容或后备内容。