这个元素比其他技术有优势
HTML5包含一个名为CANVAS的令人兴奋的元素。 它有很多用途,但为了使用它,你需要学习一些JavaScript,HTML,有时候还需要CSS。
这使得CANVAS元素对于许多设计师来说有点令人望而生畏,实际上,大多数人可能会忽略这个元素,除非有可靠的工具在不知道JavaScript的情况下创建CANVAS动画和游戏。
什么HTML5画布用于
HTML5 CANVAS元素可以用于很多以前的事情,您必须使用像Flash这样的嵌入式应用程序来生成:
- 动态图形
- 在线和离线游戏
- 动画
- 交互式视频和音频
实际上,人们使用CANVAS元素的主要原因是将简单的网页转换为动态网页应用程序变得容易,然后将该应用程序转换为移动应用程序以用于智能手机和平板电脑。
如果我们有Flash,为什么我们需要画布?
根据HTML5规范,CANVAS元素是:
“......一个依赖于分辨率的位图画布,可用于即时渲染图形,游戏图形,艺术或其他视觉图像。”CANVAS元素允许您实时在网页上绘制图形,图形,游戏,艺术作品和其他视觉效果。
您可能认为我们已经可以使用Flash来做到这一点,但是CANVAS和Flash之间有两个主要区别:
- CANVAS元素嵌入在HTML中。 绘制它的脚本要么在HTML中,要么在链接的外部文件中。 这意味着CANVAS元素是文档对象模型或DOM的一部分。
- Flash是一个嵌入式外部文件。 它使用EMBED或OBJECT元素来显示,并且不能直接与其他HTML元素进行交互。 由于CANVAS元素是DOM的一部分,因此它可以通过多种方式与DOM进行交互。
- 例如,您可以创建一个动画,当页面的其他部分与之交互时,这些动画会发生变化 - 例如填充表单元素。使用Flash,您可以做的最多的操作是启动Flash动画或动画,但与CANVAS可以创建许多不同的效果,甚至可以将表单字段中的文本添加到动画中。
- 网络浏览器本地支持CANVAS元素。 为了让用户真正使用Flash,他们的浏览器必须安装插件。 由于过时的Flash安装或其操作系统根本不支持它,这对大多数人来说通常是一件麻烦事。
- 它曾经是每个浏览器都安装了插件,但现在不再是这种情况了,许多人甚至因为困难而删除插件。 另外,它还没有在流行的iOS平台上提供。
即使您从未计划使用Flash,画布也很有用
CANVAS元素如此混乱的主要原因之一是许多设计师已经习惯于完全静态的网页。 图片可能是动画的,但这是用GIF完成的,当然你可以将视频嵌入到页面中,但是再次,这是一个静态视频,它只是坐在页面上,可能由于交互而启动或停止,但仅此而已。
CANVAS元素允许您为网页添加更多的交互性,因为现在您可以使用脚本语言动态地控制图形,图像和文本。 CANVAS元素可帮助您将图像,照片,图表和图形转换为动画元素。
何时考虑使用画布元素
在决定是否使用CANVAS元素时,您的受众应该是您的首要考虑事项。
如果受众主要使用Windows XP和IE 6,7或8,那么创建动态画布功能将变得毫无意义,因为这些浏览器不支持它。
如果您正在构建仅用于Windows机器的应用程序,那么Flash可能是您最好的选择。 在Windows和Mac电脑上使用的应用程序可以从Silverlight应用程序中受益。
但是,如果您的应用程序需要在移动设备(包括Android和iOS)以及现代台式计算机(更新至最新浏览器版本)上进行查看,那么使用CANVAS元素是一个不错的选择。
请记住,使用此元素可以为不支持它的旧版浏览器提供后备选项,例如静态图像。
但是,不建议使用HTML5画布进行所有操作。 您不应该将它用于您的标志,标题或导航等内容(尽管使用它来制作任何这些内容的一部分都可以)。
根据规范,您应该使用最适合您正在尝试构建的元素。 因此,使用HEADER元素以及图像和文本优于用于标题和徽标的CANVAS元素。
另外,如果您正在创建打算在非交互式介质(如打印)中使用的网页或应用程序,则应该意识到已经动态更新的CANVAS元素可能无法按预期打印。 您可能会打印当前内容或后备内容。