为什么使用HTML5 Canvas创建内容比使用Flash创作要复杂得多？

Question

我已经做了几个月的Flash，我喜欢它。我可以轻松地使用矩形工具绘制矩形，并在几秒钟内完成形状/动画补间。

现在有很多人在谈论HTML5与Flash，我今天看了一下HTML5 Canvas。令我惊讶的是，我看到了一大堆“代码”。它太复杂了，他们需要做很多调用（填充，描边，移动，关闭路径等......）来制作一个简单的形状。甚至几十行代码与javascript混合做一个简单的动作???

我错过了什么吗？使用HTML5 Canvas比Flash更加复杂。

Answer 1

好问题。我和<canvas>一起工作了几年，我也是一名前Flash开发人员。

我不认为你错过了什么。好吧，<canvas>，你知道， 看起来比Flash更复杂:)。 Flash是一种客户端工具。它提供了一个很棒的GUI，大量的视觉和即时功能，并允许用户有时编写动画而无需一行代码（actionscript）。另一方面，使用特定的HTML5标签，您可以做很多Flash技术更容易做到的事情。但使用它有几个优点，例如：

• 它是跨浏览器（让我们假设IE9会有完全的跨浏览器兼容性 - 顺便说一下，有一个excanvas lib在IE中用vml代替画布＆lt; 9）
• 您无需下载插件即可查看
• 它不会“超载”DOM
• 您可以在库中包装一些逻辑模式（绘制线条，绘制形状，动画内容）以使其更易于使用。
• 一旦你知道它是如何工作的，你就可以设计和制作出色的平滑轻巧的小工具/图表/动画
• 您无需付费即可使用它：）
• 等

顺便说一句，Flash有一个非常不同的目标：它允许用户在特定平台内构建所有内容，而无需完全集成到浏览器中。它是一种特殊的（当然非常棒的）技术，包含在浏览器中，主要范围是多媒体和无限种类的动画。

Canvas'的目标完全不同。这是一种通过该标签在浏览器内，特定页面内获取形状，动画等的“新方法”。请记住，你必须编写可以在2d和3d上下文中呈现内容的JS代码（不是太好了???：D）

P.S。看看我们（我和我的同事@ work）为大学的软件工程课程提出的这两个画布项目：

AjaxDraw，基于<canvas>的完整画家，它导出/导入svg文件

SketchYourSite，由<canvas>元素

代表的项目

Answer 2

我不清楚你在问什么。 <canvas>是标准，而不是创作工具。 Flash有一个创作工具，因为它是由一家公司编写的，它可以为它销售创作工具（在撰写本文时，Flash Professional为699美元）。

我自己并没有这样做，所以我不熟悉<canvas>创作工具的状态，但显然Adobe会在<canvas>中添加一些支持<canvas>。其产品as mentioned last year by Dave Shea。没有什么可以阻止其他公司为{{1}}编写设计师友好的创作工具。

Answer 3

我认为你没有遗漏任何东西，HTML5 Canvas背后的想法是提供所有浏览器的标准功能。这在宏伟的计划中仍然是非常新的，并不一定是所有人的完整解决方案。

请记住，对于任何此类性质的任何内容，如果您打算使用繁重的动画，则可能需要使用库与canvas元素进行交互。自定义或第三方，无需每次都重新键入代码。

Answer 4

Canvas本身无法取代整个Flash开发环境。 canvas的目的是为real time graphics创建一个跨浏览器标准，这可能会减少对第三方插件Flash Player的需求。 Canvas暴露了一些低级的绘图函数，但整个库可以构建在它之上（就像在Flash中补间库一样），并且可以构建开发环境，编译为针对画布对象的Javascript（就像Flash创作工具一样） ）。

很难肯定地说，但我认为我们还没有看到Canvas的许多优秀创作工具的原因是因为画布仍然非常慢，缺乏FlashPlayer所具有的许多功能，并且存在不确定性减慢的问题HTML5的采用过程（例如视频编解码器）。

Answer 5

你担心“代码”，但是当使用Flash AS3时，无论如何你都会编写很多代码。

我正在将我几年前做过的小型AS3游戏移植到Canvas，到目前为止我看不出两者之间有什么大的区别。 画布更低级别，缺少许多有用的功能，您必须构建它们，就像上面提到的框一样。即使是圆圈也不可用，但是你可以制作一个4-5行的功能来绘制一个圆圈，所以这不是一个真正的问题。

到目前为止，Flash有三个问题：

• 着色/混合是基本的（只是透明和添加非常有用），而Flash几乎可以使用任何Photoshop混合模式。

• 虽然Flash终于（在等待多年之后）处理声音时非常华丽，但到目前为止，仍然年轻的HTML5音频标签确实很差。

• 速度。 Flash在同一台机器上比canvas / JS更快。

尽管如此，主要的浏览器供应商正在尽最大努力改善性能和功能，并将解决许多问题。

Answer 6

好与坏：Flash与HTML5

历史第一

与往常一样，从历史中获取一些事实是件好事！ Flash是由Macromedia公司在九十年代中期推出的。当时，网络技术并不像我们今天所拥有的那样接近。老实说，当时的网站看起来像废话。人们可以借助Flash将网站带到一个全新的水平。这就是为什么Flash变得如此受欢迎并且它成为今天的原因：一个流行的补充浏览器插件。

然而，我们可以看到计算能力，磁盘空间和Internet连接速度的相当令人印象深刻的演变。随着这种发展，出现了新的Web标准和具有丰富功能的新浏览器。当然，我们也会随着时间的推移看到JavaScript和CSS的生命。强大的HTML / XHTML，CSS和JavaScript三重奏是HTML5的基础。新的和令人兴奋的功能是HTML5的核心。我强烈邀请您阅读first chapter of HTML5 For Web Designers。

非常非常不同

为了能够使用Flash组件创建网站，必须有Macromedia / Adob​​e Flash（Macromedia是Adobe购买的）。我必须同意使用Flash可以做很棒的事情，但它已经变得非常昂贵了！我们不得不问自己，这个软件真的值得这么麻烦......

毕竟，Flash组件是专有的，有些人会说它打破了万维网（WWW）的开放性。在我看来，Flash很容易使网站膨胀，因为组件通常会占用大量带宽。想想第三世界国家的可能用户（他们可能比你想象的更多）。此外，有一些关于漏洞利用和漏洞的安全问题（快速Google search）。因此，我总是谨慎使用Flash。现在，这并不意味着网站在没有Flash的情况下也很难看。简单地看一下那里的大量网站画廊，例如cssline。

另一方面，浏览器技术终于可以掌握HTML5来完成Flash过去17年来所做的工作。我们还没有看到某些标签的全部可能性，例如canvas，因为HTML5需要时间才能成熟。事实上，它仍然是一项正在进行的工作，因为它只会在2012年成为候选人推荐，并且它将在2022年提出建议。或许，您可以开始看到Flash和HTML5之间的差异。

故事结束

我相信你因为不知道HTML5和画布标签而遗漏了一些东西。

查看此HTML5 vs Flash网站进行演示。也许，您可以在该网站的帮助下发表意见（最好使用Chrome，Safari和Opera等现代浏览器）。请大家一心，因为与Flash相比，HTML5仍然非常年轻。顺便问一下，你有没有听说过WebGL的东西？