blocks|key|676866|text|我不认为您遗漏了任何东西，HTML5+Canvas背后的想法是为所有浏览器提供标准功能。这在宏伟的计划中仍然是非常新的，并不一定是所有人的完整解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|676867|一定要记住，对于这种性质的任何东西，如果您计划使用大量动画，您可能会希望使用库与canvas元素进行交互。自定义或第三方，不需要每次都重新输入代码。|676868|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|676960|text|问得好。我使用<canvas>已经有几年了，我以前也是一个flash开发人员。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|676961|我也不认为你遗漏了什么。嗯，<canvas>，你知道，it+的看起来比<canvas>+:)更复杂。Flash是一个客户端工具。它提供了一个令人敬畏的GUI，许多可视化和即时的功能，并允许用户编写动画，有时甚至不需要一行代码(actionscript)。另一方面，有了这个特殊的HTML5标签，你可以做很多用闪存技术更容易做的事情。但是使用它有几个优点，例如：|BOLD|676962|676963|它的跨浏览器(让我们假设IE9将会有完全的跨浏览器兼容性-顺便说一句，在IE<9中有一个用vml代替画布的excanvas库)|unordered-list-item|676964|你不必下载一个插件来查看一些东西|676965|它不会“过载”DOM|676966|你可以在一个库中包装一些逻辑模式(绘制线条，绘制形状，动画一些东西)以使它更容易使用。|676967|<代码>H113一旦你知道了它是如何工作的，您可以设计和构建令人惊叹的、平滑和轻量级的小工具/图表/动画:)|676968|etc.|676969|+|676970|您无需付费即可使用它|676971|676972|顺便说一句，Flash有一个非常不同的目标:它允许用户在特定平台内构建所有内容，而无需完全集成到浏览器中。这是一个特别的(当然也很棒！)技术包装在浏览器中，主要范围是多媒体和无限种类的动画。|676973|Canvas的目标完全不同。这是一种在浏览器中、在特定页面中、通过该标签获取形状、动画等的“新”方式。请记住，您必须编写可以在2d和3d上下文中呈现内容的JS代码(这不是很好吗？:D)|676974|附注：看看我们(我和我的同事@+work)为大学软件工程课程提出的这两个canvas项目：|676975|AjaxDraw，完全基于<canvas>的绘图器，它可以导出/导入svg文件|676976|SketchYourSite，由<canvas>元素表示的项|676977|entityMap|0|LINK|mutability|MUTABLE|url|http://ajaxdraw.altervista.org/|1|http://sketchyoursite.sourceforge.net/^0|7|8|0|E|8|Z|8|U|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|D|8|0|8|0|0|G|8|0|E|1|0^^$0|@$1|2|3|4|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|H]]|D|@]|E|$]]|$1|I|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1W|8|@]|D|@]|E|$]]|$1|M|3|N|5|L|7|1X|8|@]|D|@]|E|$]]|$1|O|3|P|5|L|7|1Y|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1Z|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|20|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|21|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|22|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|23|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|24|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|25|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|26|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|27|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|28|8|@$9|29|A|2A|B|C]]|D|@$9|2B|A|2C|1|2D]]|E|$]]|$1|19|3|1A|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|D|@$9|2H|A|2I|1|2J]]|E|$]]|$1|1B|3|-4|5|6|7|2K|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]|1J|$5|1E|1F|1G|E|$1H|1K]]]]

Good question. I've been working with <code>&lt;canvas&gt;</code> for a couple of years and I'm also a former flash developer. 

I don't think too you are missing something. Well, <code>&lt;canvas&gt;</code>, 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:

<ul>
<li>It's cross-browser (let's assume by IE9 there will be full cross-browser compatibility - btw there is excanvas lib that writes vml in place of canvas in IE&lt;9)</li>
<li>You don't have to download a plugin to view something</li>
<li>It doesn't 'overload' the DOM</li>
<li>You can wrap some logical patterns (draw lines, draw shapes, animate something) inside a library to make it easier to use.</li>
<li>Once you know how it works, you can design and build awesome smooth and lightweight gadgets/charts/animations </li>
<li>You don't have to pay to use it :)</li>
<li>etc.</li>
</ul>

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:

<a href="http://ajaxdraw.altervista.org/" rel="nofollow noreferrer">AjaxDraw</a>, full <code>&lt;canvas&gt;</code> based painter, it export/import svg files

<a href="http://sketchyoursite.sourceforge.net/" rel="nofollow noreferrer">SketchYourSite</a>, items represented by <code>&lt;canvas&gt;</code> elements

blocks|key|4346494|text|我不太清楚你在问什么。<canvas>是一个标准的工具，而不是一个创作工具。Flash有一个创作工具，因为它是由一家公司编写的，该公司通过销售创作工具来赚钱(在撰写本文时，Flash+Professional的价格为699美元)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4346495|我自己不做这类事情，所以我不熟悉<canvas>创作工具的现状，但显然Adobe将在它的一些产品as+mentioned+last+year+by+Dave+Shea中添加一些对<canvas>的支持。也没有什么能阻止其他公司为<canvas>编写设计者友好的创作工具。|4346496|entityMap|0|LINK|mutability|MUTABLE|url|http://www.mezzoblue.com/archives/2010/01/14/illustrator_/^0|B|8|0|G|8|2H|8|36|8|1C|Z|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

I’m not exactly clear what you’re asking. <code>&lt;canvas&gt;</code> 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 <code>&lt;canvas&gt;</code> authoring tools, but apparently Adobe is going to add some support for <code>&lt;canvas&gt;</code> in some of its products, <a href="http://www.mezzoblue.com/archives/2010/01/14/illustrator_/" rel="nofollow">as mentioned last year by Dave Shea</a>. There’s nothing stopping other companies writing designer-friendly authoring tools for <code>&lt;canvas&gt;</code> either.

blocks|key|1690950|text|你担心的是“代码”，但当使用闪存AS3时，你无论如何都要写很多代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1690951|我正在将几年前完成的一个小AS3游戏移植到Canvas，到目前为止，我看不出这两者之间有什么很大的区别。Canvas的级别较低，缺少许多有用的函数，您必须构建它们，就像您上面提到的框一样。甚至连圆都不可用，但你可以做一个4-5线的函数来画一个圆，所以这不是一个真正的问题。|1690952|到目前为止，Flash更好的地方有三个问题：|1690953|1690954|Colorizing/blending是基本的(只是透明和添加物是非常有用的)，虽然Flash几乎有任何Photoshop混合模式available.|unordered-list-item|1690955|While+Flash终于(在等待多年后)在处理声音方面华丽，仍然年轻的HTML5音频标签到目前为止真的很差。|1690956|速度。在同一台机器上，Flash比canvas/JS更快。|1690957|1690958|尽管如此，主要的浏览器供应商正在尽最大努力提高性能和功能，许多问题将得到解决。|1690959|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|Y|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

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:

<ul>
<li>Colorizing/blending is basic (just transparent and additive are really useful) while Flash has almost any Photoshop blend mode available.</li>
<li>While Flash is finally (after waiting for years) gorgeous at handling sound, the still young HTML5 audio tag is really poor so far.</li>
<li>Speed. Flash is faster than canvas/JS in the same machine.</li>
</ul>

Despite this, the main browser vendors are doing their best to improve performances and features, and many issues will be addressed.

blocks|key|4346575|text|好与坏:+Flash+vs+HTML5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4346576|历史记录第一个|offset|length|style|BOLD|4346577|像往常一样，从历史中获得一点事实是很好的！Flash是90年代中期由Macromedia公司推出的。当时，web技术还远远比不上我们今天所拥有的。老实说，当时的网站看起来很垃圾。在Flash的帮助下，人们可以将网站提升到一个全新的水平。这就是为什么Flash变得如此流行，也就是它今天的样子:一个流行的补充浏览器插件。|4346578|然而，我们可以看到在计算能力、磁盘空间和互联网连接速度方面取得了令人印象深刻的进展。随着这种演变，出现了新的web标准和具有丰富功能的新浏览器。当然，随着时间的推移，我们也看到了JavaScript和CSS的生命。HTML5的基础是HTML/XHTML、CSS和JavaScript这三个强大的组件。新的和令人兴奋的特性是HTML5的核心。我强烈邀请您阅读first+chapter+of+HTML5+For+Web+Designers。|4346579|截然不同的|4346580|为了能够创建一个具有Flash组件的网站，一个人必须有Macromedia/Adobe+Flash+(Macromedia被Adobe收购)。我必须同意，用Flash做很棒的事情是可能的，但它已经变得非常昂贵！我们必须问自己，这个软件是否真的值得我们这么做……|4346581|毕竟，Flash组件是专有的，有些人会说它打破了万维网(WWW)的开放本质。在我看来，Flash很容易让网站变得臃肿，因为这些组件通常会占用很多带宽。想想第三世界国家的潜在用户(他们的数量比你想象的要多)。此外，还有一些关于漏洞和缺陷的安全问题(有一个快速的Google+search)。因此，我总是谨慎地使用Flash。现在，这并不意味着网站没有Flash就很难看。简单地看一下市面上成堆的网站画廊，比如cssline。|4346582|另一方面，浏览器技术终于到了可以掌握HTML5的地步，可以做到Flash在过去17年里一直在做的事情。我们还没有看到某些标签的全部可能性，比如canvas，因为HTML5需要时间来成熟。事实上，这仍然是一项正在进行的工作，因为它将只是2012年的候选推荐，而将是2022年的提议推荐。也许，你可以开始看到闪存和HTML5是多么的不同。|CODE|4346583|故事的结尾|4346584|我相信您由于不了解HTML5和canvas标签而遗漏了一些东西。|4346585|看看这个HTML5+vs+Flash网站上的演示。也许，你将能够在该网站的帮助下发表意见(最好使用现代浏览器，如Chrome、Safari和Opera)。请保持开放的心态，因为与闪存相比，HTML5还很年轻。顺便问一下，你听说过一个叫WebGL的东西吗？|4346586|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/articles/a-brief-history-of-markup/|1|http://www.google.com/#sclient=psy&hl=en&q=flash%2520security%2520issues&aq=2&aqi=g4g-o1&aql=&oq=&pbx=1&fp=25a0b2344dc0e416&pf=p&pdl=300|2|http://cssline.com/|3|http://html5vsflash.tumblr.com/^0|0|0|7|0|0|4Y|14|0|0|0|5|0|0|3L|D|1|5N|7|2|0|1Z|6|0|0|0|4|E|3|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|L|3|M|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1R|8|@]|9|@$D|1S|E|1T|1|1U]|$D|1V|E|1W|1|1X]]|A|$]]|$1|R|3|S|5|6|7|1Y|8|@$D|1Z|E|20|F|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|21|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|22|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|23|8|@]|9|@$D|24|E|25|1|26]]|A|$]]|$1|10|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]|1A|$5|13|14|15|A|$16|1B]]|1C|$5|13|14|15|A|$16|1D]]]]

<h2>The Good and the Bad : Flash vs HTML5</h2>

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 <a href="http://www.alistapart.com/articles/a-brief-history-of-markup/" rel="nofollow">first chapter of HTML5 For Web Designers</a>. 

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 <a href="http://www.google.com/#sclient=psy&amp;hl=en&amp;q=flash%20security%20issues&amp;aq=2&amp;aqi=g4g-o1&amp;aql=&amp;oq=&amp;pbx=1&amp;fp=25a0b2344dc0e416&amp;pf=p&amp;pdl=300" rel="nofollow">Google search</a>). 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 <a href="http://cssline.com/" rel="nofollow">cssline</a> 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 <code>canvas</code> because 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 <a href="http://html5vsflash.tumblr.com/" rel="nofollow">HTML5 vs Flash</a> 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?

blocks|key|1690975|text|Canvas本身不能取代整个Flash开发环境。canvas的目的是为real+time+graphics创建一个跨浏览器的标准，这可能会减少对Flash+Player的需求，Flash+Player是一个第三方插件。Canvas公开了一些低级的绘图函数，但整个库都可以构建在它之上(就像Flash中的补丁库一样)，并且可以构建开发环境，将其编译为针对canvas对象的Javascript+(就像Flash创作工具一样)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1690976|很难说，但我认为我们还没有看到很多好的Canvas创作工具的原因是因为canvas仍然相当慢，缺乏FlashPlayer所具有的许多功能，并且存在不确定性问题，减缓了HTML5的采用过程(例如。视频编解码器)。|1690977|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Real-time_computer_graphics^0|Z|I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Canvas itself cannot replace the entire Flash development environment. The purpose of canvas is to create a cross browser standard for <a href="http://en.wikipedia.org/wiki/Real-time_computer_graphics" rel="nofollow">real time graphics</a>, 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).

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.

Why is creating content with HTML5 Canvas much more complicated than authoring with Flash?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我做Flash已经有几个月了，我很喜欢它。我可以很容易地使用矩形工具来绘制一个矩形，并在几秒钟内完成形状/动画补间。现在很多人都在谈论HTML5和闪存，我今天在HTML5 Canvas上看了一下。令我惊讶的是，我看到了一大堆“代码”。它太复杂了，它们需要进行很多调用(填充、笔划、移动、关闭路径等)。来制作一个简单的形状...

问为什么用HTML5画布创建内容要比用Flash创作复杂得多？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么用HTML5画布创建内容要比用Flash创作复杂得多？EN