HTML5 Canvas: What It Is and Why It’s Used

HTML5包括一个叫做CANVAS的令人兴奋的元素。它有很多用途，但要使用它，你需要学习一些JavaScript，超文本标记语言,有时CSS。

这使得CANVAS元素让许多设计师望而却步，事实上，大多数设计师可能会忽略这个元素，直到有可靠的工具来创建CANVAS动画和游戏，而不知道JavaScript。

HTML5 Canvas的用途

HTML5 CANVAS元素可以用于许多以前你必须使用像Flash这样的嵌入式应用来生成的东西:

• 动态图形
• 线上和线下游戏
• 动画
• 交互式视频和音频

事实上，人们使用CANVAS元素的主要原因是，将一个普通网页转换成一个动态网页应用程序，然后将该应用程序转换成智能手机和平板电脑上使用的移动应用程序非常容易。

如果我们有Flash，为什么我们需要Canvas?

根据HTML5规范， CANVAS元素是:“…一个依赖于分辨率的位图画布，可用于实时渲染图形、游戏图形、美术或其他视觉图像。”

CANVAS元素可以让你实时在网页上绘制图形、图形、游戏、美术和其他视觉效果。

你可能会认为我们已经可以在Flash上做到这一点，但CANVAS和Flash之间有两个主要的区别:

1. CANVAS元素嵌入在HTML中。绘制它的脚本要么在HTML中，要么在一个链接的外部文件中。这意味着CANVAS元素是文档对象模型(DOM)的一部分。
   1. Flash是一个嵌入的外部文件。它使用EMBED或OBJECT元素来显示，并且不能直接与其他HTML元素交互。因为CANVAS元素是DOM的一部分，所以它可以通过多种方式与DOM交互。
   2. 例如，您可以创建一个在与页面的其他部分交互时发生变化的动画——例如填充表单元素。使用Flash，你能做的最多就是启动Flash影片或者动画，但是使用CANVAS，您可以创建许多不同的效果，甚至可以将表单字段中的文本添加到动画中。
2. CANVAS元素是由web浏览器原生支持的。为了让用户真正使用Flash，他们的浏览器必须安装插件。对于大多数人来说，这通常是一个麻烦，因为Flash安装过时了，或者他们的操作系统根本不支持它。
   1. 过去，每个浏览器都安装了这个插件，但现在不再是这样了，许多浏览器甚至因为困难而删除了这个插件。而且，它甚至在流行网站上都没有iOS平台。

画布是有用的，即使你从未计划使用Flash

CANVAS元素如此令人困惑的一个主要原因是，许多设计师已经习惯了完全静态的网页。图像可能是动画，但那已经结束了GIF当然，你可以将视频嵌入到页面中，但同样，它是一个静态视频，只是停留在页面上，可能由于交互而开始或停止，但仅此而已。

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

何时考虑使用画布元素

当你决定是否使用CANVAS元素时，你的受众应该是你首先考虑的因素。

如果你的用户主要使用Windows XP和IE 6,7或8，然后创建一个动态画布特性将是毫无意义的，因为这些浏览器不支持它。

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

但是，如果你的应用需要在移动设备(Android和iOS)以及现代桌面电脑(更新到最新的浏览器版本)上查看，那么使用CANVAS元素是一个很好的选择。

请记住，使用这个元素可以为不支持它的旧浏览器提供后备选项，比如静态图像。

然而，不推荐所有东西都使用HTML5 canvas。你应该从来没有将其用于你的logo、标题或导航(尽管将其用于其中的一部分动画也可以)。

根据该规范，您应该使用最适合您试图构建的内容的元素。因此，使用HEADER元素以及图像和文本比使用CANVAS元素更可取。

此外，如果您正在创建网页或者打算在非交互式媒体(如打印)中使用的应用程序，您应该知道，已被动态更新的CANVAS元素可能不会像您期望的那样打印。您可能会得到当前内容或回退内容的打印。