为什么使用 HTML5 Canvas 创建内容比使用 Flash 创作复杂得多？
我已经使用 Flash 几个月了，我很喜欢它。我可以轻松地使用矩形工具绘制矩形并在几秒钟内进行形状/补间动画。
现在很多人都在谈论 HTML5 与 Flash，我今天看了一下 HTML5 Canvas。令我惊讶的是，我看到了一大堆“代码”。它是如此复杂，他们需要进行大量调用（填充、描边、移动、关闭路径等......）来制作一个简单的形状。甚至几十行代码与javascript混合来做一个简单的动作？？？
我错过了什么吗？使用 HTML5 Canvas 制作的动画比使用 Flash 复杂 10 倍。
I've been doing Flash for couple of months and I love it. I can easily use a rectangle tool to draw a rectangle and do shape/motion tweening within seconds.
Lots of people are talking about HTML5 vs Flash nowadays and I took a look on HTML5 Canvas today. To my surprised, I see whole bunch of "code". It's so complicated, they need to make a lot of calls (fill, stroke, moveto, closepath etc...) to make a simple shape. And even dozens lines of code mixing with javascript to do a simple movement???
Am I missing something? It'll make animation 10x more complicated with HTML5 Canvas than Flash.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
好问题。我使用
已经有几年了，我也是一名前 Flash 开发人员。我也不认为你错过了什么。嗯，
，您知道，它必须看起来比 Flash 更复杂:)。 Flash是一个客户端工具。它提供了一个很棒的 GUI、许多视觉和即时功能，并且允许用户有时无需一行代码（动作脚本）即可编写动画。另一方面，使用特定的 HTML5 标签，您可以完成许多通过 Flash 技术更容易完成的事情。但使用它有几个优点，例如：顺便说一句，Flash有一个非常不同的目标：它让用户构建特定平台内的所有内容，无需完全集成到浏览器中。这是一种特殊的（当然很棒！！）技术，包含在浏览器中，主要范围是多媒体和无限种类的动画。
Canvas 的目标完全不同。这是一种通过该标签在浏览器内、特定页面内获取形状、动画等的“新”方法。请记住，您必须编写可以在 2d 和 3d 上下文中渲染某些内容的 JS 代码（这不是很好吗？？？：D）
Ps 看看我们（我和我的同事@工作）拥有的这两个画布项目建议大学软件工程课程：
AjaxDraw，完整的
基于画家，它导出/导入 svg 文件SketchYourSite，项目由
Good question. I've been working with
<canvas>for a couple of years and I'm also a former flash developer.I don't think too you are missing something. Well,
<canvas>, you know, it has to look more complicated than Flash :). Flash is a client tool. It provides an awesome GUI, lots of visual and immediate features and lets the user compose animations sometimes without a single line of code (actionscript). On the other side, with that particular HTML5 tag you can do a lot of things that are easier to do by Flash technology. But there are several advantages about using it, for example:By the way Flash has a very different goal: it lets the user build everything inside a particular platform without a full integration into the browser. It is a particular (and surely awesome!!) technology wrapped inside the browser with the main scopes that are multimedia and unlimited kinds of animation.
Canvas' goal is completely different. It's a 'new' way to obtain shapes, animations etc. inside the browser, inside a particular page, through that tag. Remember that you have to write JS code that can render something in both 2d and 3d context (isn't it sooo good??? :D)
P.s. take a look at these two canvas projects we (me and my colleauges @ work) have proposed for the software engineering course at university:
AjaxDraw, full
<canvas>based painter, it export/import svg filesSketchYourSite, items represented by
<canvas>elements我不太清楚你在问什么。
是一个标准，而不是创作工具。 Flash 有一个创作工具，因为它是由一家通过销售其创作工具赚钱的公司编写的（在撰写本文时，Flash Professional 的售价为 699 美元）。我自己不做这类事情，所以我不熟悉
创作工具的状态，但显然 Adobe 将添加一些对在其一些产品中，正如 Dave 去年提到的乳木果。也没有什么可以阻止其他公司为编写设计人员友好的创作工具。I’m not exactly clear what you’re asking.
<canvas>is a standard, not an authoring tool. Flash has an authoring tool because it’s written by one company that makes its money selling authoring tools for it ($699 for Flash Professional at the time of writing).I don’t do this sort of thing myself, so I’m not familiar with the state of
<canvas>authoring tools, but apparently Adobe is going to add some support for<canvas>in some of its products, as mentioned last year by Dave Shea. There’s nothing stopping other companies writing designer-friendly authoring tools for<canvas>either.我认为您没有遗漏任何内容，HTML5 Canvas 背后的想法是为所有浏览器提供作为标准的功能。从长远来看，这仍然是一个非常新的事物，并不一定是适合所有人的完整解决方案。
请记住，对于这种性质的任何内容，如果您打算使用大量动画，您可能会希望使用库与画布元素进行交互。自定义或第三方，无需每次都重新输入代码。
I don't think you are missing anything, the idea behind HTML5 Canvas is to provide the functionality as a standard for all browsers. This is still very new in the grand scheme of things, and not necessarily a complete solution for all people.
Do keep in mind that with anything of this nature, you will probably want to use a library to interact with canvas elements if you plan on using heavy animation. Custom or third party, no need to retype code every time.
Canvas本身无法替代整个Flash开发环境。 canvas 的目的是为实时图形创建一个跨浏览器标准，这有可能减少对第三方插件 Flash Player 的需求。 Canvas 公开了一些低级绘图函数，但可以在其之上构建整个库（就像 Flash 中的补间库），并且可以构建开发环境，将其编译为针对画布对象的 Javascript（就像 Flash 创作工具）。
很难肯定地说，但我认为我们还没有看到很多优秀的 Canvas 创作工具的原因是 Canvas 仍然很慢，缺乏 FlashPlayer 拥有的许多功能，并且存在不确定性问题，减缓了采用过程HTML5（例如视频编解码器）。
Canvas itself cannot replace the entire Flash development environment. The purpose of canvas is to create a cross browser standard for real time graphics, which could potentially reduce the need for Flash Player which is a 3rd party plugin. Canvas exposes somewhat low-level drawing functions, but entire libraries can be built on top of it (just like tweening libraries in Flash), and development environments can be built which compile to Javascript targeted at a canvas object (Just like the Flash authoring tool).
It's hard to say for sure, but I think the reason we haven't seen many good authoring tools for Canvas yet is because canvas is still pretty slow, lacks many features that FlashPlayer has, and there are issues of uncertainty slowing down the adoption process of HTML5 (eg. video codecs).
您担心“代码”，但是当使用 Flash AS3 时，您无论如何都要编写大量代码。
我正在将几年前做的一个小型 AS3 游戏移植到 Canvas，到目前为止我还没有看到两者之间有什么很大的区别。
Canvas 级别较低，缺少许多有用的功能，您必须构建它们，就像您上面提到的盒子一样。即使是圆形也不可用，但您可以使用 4-5 行函数来绘制圆形，所以这并不是真正的问题。
到目前为止，Flash 在以下三个问题上表现更好：
着色/混合是基本的（只有透明和附加效果才真正有用），而 Flash 几乎具有任何可用的 Photoshop 混合模式。
虽然 Flash 终于（在等待了多年之后）在处理声音方面表现出色，但仍然年轻的 HTML5 音频标签到目前为止确实很差。
速度。在同一台机器上Flash比canvas/JS要快。
尽管如此，主要浏览器供应商仍在尽最大努力改进性能和功能，许多问题将得到解决。
You are worried about the "code", but when using Flash AS3 you get to write a lot of code anyway.
I'm porting a small AS3 game I did few years ago to Canvas, and so far I don't see any great difference between the two.
Canvas is more low level, many useful functions are missing and you have to build them, just like the box you mentioned above. Even circles are not available, but you can make a 4-5 lines function to draw a circle, so is not really an issue.
There are three issues so far where Flash is better:
Colorizing/blending is basic (just transparent and additive are really useful) while Flash has almost any Photoshop blend mode available.
While Flash is finally (after waiting for years) gorgeous at handling sound, the still young HTML5 audio tag is really poor so far.
Speed. Flash is faster than canvas/JS in the same machine.
Despite this, the main browser vendors are doing their best to improve performances and features, and many issues will be addressed.
好与坏：Flash 与 HTML5
历史优先
一如既往，从历史中了解一些事实是件好事！ Flash 由 Macromedia 公司于九十年代中期推出。当时的网络技术与我们今天所拥有的技术相差甚远。老实说，当时的网站看起来很糟糕。借助 Flash，人们可以将网站提升到一个全新的水平。这就是 Flash 变得如此流行的原因，它也成为了今天的样子：一种流行的补充性浏览器插件。
然而，我们可以看到计算能力、磁盘空间和互联网连接速度方面的令人印象深刻的演变。随着这种演变出现了新的网络标准和具有丰富功能的新浏览器。当然，随着时间的推移，我们也逐渐看到了 JavaScript 和 CSS 的生命力。 HTML/XHTML、CSS 和 JavaScript 的强大三重奏是 HTML5 的基础。令人兴奋的新功能是 HTML5 的核心。我强烈邀请您阅读《HTML5 Web 设计师指南》第一章< /a>.
非常非常不同
为了能够使用 Flash 组件创建网站，必须拥有 Macromedia/Adobe Flash（Macromedia 已被 Adobe 收购）。我必须同意，使用 Flash 可以做出伟大的事情，但它已经变得非常昂贵！我们必须扪心自问，这个软件是否真的值得这么麻烦……
毕竟，Flash 组件是专有的，有些人会说它破坏了万维网 (WWW) 的开放性。以我的拙见，Flash 很容易使网站变得臃肿，因为这些组件通常会占用大量带宽。考虑第三世界国家的可能用户（他们的数量比您想象的要多）。此外，还存在一些有关漏洞利用和缺陷的安全问题（快速Google 搜索）。因此，我一直很少使用Flash。现在，这并不意味着没有 Flash 的网站就会变得丑陋。简单地看一下那里的大量网站画廊，例如 cssline 之一。
另一方面，浏览器技术终于达到了可以掌握 HTML5 来完成 Flash 过去 17 年所做的事情的程度。我们还没有看到某些标签（例如
canvas）的全部可能性，因为 HTML5 需要时间才能成熟。事实上，它仍在进行中，因为它只会在 2012 年成为候选推荐，并在 2022 年成为提议推荐。也许，您可以开始看到 Flash 和 HTML5 之间有多么不同。故事结束
我相信您因为不了解 HTML5 和 canvas 标签而错过了一些东西。
请访问这个 HTML5 与 Flash 网站进行演示。也许，您将能够在该网站的帮助下发表意见（最好使用现代浏览器，例如 Chrome、Safari 和 Opera）。请保持开放的心态，因为与 Flash 相比，HTML5 还很年轻。顺便问一下，您听说过 WebGL 吗？
The Good and the Bad : Flash vs HTML5
History First
As always, it is good to get a bit of facts from history! Flash was introduced in the mid nineties by the company Macromedia. At the time, web technologies were no where close to what we have today. To be honest with you, websites back then looked like crap. One could bring websites to an all new level with the help of Flash. This is why Flash became so popular and it is what it become today : a popular complementary browser plugin.
Yet, we can see quite an impressive evolution in computing power, disk space and Internet connection speed. With that evolution came new web standards and new browsers with rich features. Of course, we came to see the life of JavaScript and CSS with time as well. The powerful trio of HTML/XHTML, CSS and JavaScript are the foundations of HTML5. New and exciting features are at the core of HTML5. I would strongly invite you to read the first chapter of HTML5 For Web Designers.
Very, Very Different
To be able to create a website with Flash components, one must have Macromedia/Adobe Flash (Macromedia was bought by Adobe). I must agree that it is possible to do great stuff with Flash, but it has became dramatically expensive! We have to ask ourselves if this software really worth the trouble...
After all, Flash components are proprietary and some would say that it breaks the open nature of the World Wide Web (WWW). In my humble opinion, Flash can easily make a website bloated because the components usually take a lot of bandwidth. Think about possible users in third world countries (there are more of them than you might think). Also, there has been several security concerns about exploits and flaws (have a quick Google search). Therefore, I always used Flash sparingly. Now, this does not mean that websites are ugly without Flash either. Have a simple look at the tons of website galleries out there like cssline for one.
On the other hand, browser technology is finally getting up to a point where it can grasp HTML5 to do what Flash has been doing for the last 17 years. We haven't seen the full possibilities of certain tags such as
canvasbecause HTML5 will take time to mature. In fact, it is still a work in progress because it will only be a candidate recommandation in 2012 and it will be a proposed recommandation in 2022. Perhaps, you can begin to see how different Flash and HTML5 are from each other.The End of Story
I believe that you are missing something by not knowing HTML5 and the canvas tag.
Have a look at this HTML5 vs Flash website for demos. Perhaps, you will be able to make an opinion with the help of that site (it would be best to use a modern browser such as Chrome, Safari and Opera). Please have an open mind because HTML5 is still very young compared to Flash. By the way, have you heard about something called WebGL?