Question

我已经做了很多Flash开发并且有意尝试canvas一段时间，但在浏览了一些教程之后，我无法理解这应该如何取代Flash。也许我在想错了？

注意：我在这里问一个很多的问题。我真的不希望他们都得到回答。我真正想要的是关于在<canvas>开发时我应该如何思考的一些基本指导。

从规范来看，<canvas>看起来更类似于Flash中的Graphics类，可以使用类似这样的内容：

class ColoredCircle extends Sprite {
    private var _color:uint=0x0;

    public function ColoredCircle(color:uint) {
        this.color = color;
    }

    public function set color(value:uint):void {
        _color = value;

        //******** CANVAS FUNCTIONALITY ***********
        this.graphics.clear();
        this.graphics.beginFill(_color);
        this.graphics.drawCircle(0, 0, 10);
        //*****************************************
    }
}

封闭的Sprite类具有很多我非常喜欢使用的功能。如：

显示列表

var parentSprite:Sprite = new Sprite();    // container for everything

var childSprite:Sprite = new Sprite();     // mid-level container
parentSprite.addChild(childSprite);

var someCircle:ColoredCircle = new ColoredCircle(0xFF0000);  // my circle
childSprite.addChild(someCircle);

someCircle.x = 20;  // my circle moves to the right
childSprite.y = 40; // my circle moves down
parentSprite.rotation = 90; // my circle rotates 90 degrees around a point (20,40) away

过滤器

// Drop shadow
// note that this is NOT a box shadow 
// - it clings to the visible border of the sprite
someCircle.filters = [new DropShadowFilter(....)];

// Color transforms (could also use the ColorTransform filter)
someCircle.transform.colorTransform = new ColorTransform(.....);

// Can also do blur, glow etc.

面向对象岬

这主要是因为我可以创建一个类ColoredCircle这是一个图形对象，提供所有这些功能，但我可以扩展我想要的所有功能。自动鼠标悬停，鼠标移出行为？简单。能够被拖走？也很容易。我可以添加私人成员来存储数据等。我可以轻松地从显示列表中删除我的元素（removeChild（））并将其添加回来。

...以及更多

有一百万个其他便利设施（getBounds()和localToGlobal() / globalToLocal()会浮现在脑海中），但我可以在没有它们的情况下生活。这是让我感到畏缩的其他因素。

所以...只需使用大量`<canvas>` s？

我应该像<canvas>一样对待Sprite吗？将所有内容标记为position：relative应该允许我基本上复制显示列表类型的行为（我不相信你可以嵌套<canvas>元素，但是你可以通过抛出一堆{{1}来实现这一点。 } S）。但是，我在项目中使用了{strong>很多的<div> s。这将是一个公制的小帆布元素。另外，您如何处理Sprite中的鼠标事件？如果有人点击画布盒子模型的透明部分（坏），它们会触发吗？如果我有一个带有两个圆圈的画布，我需要知道哪一个被点击，我是否必须用鼠标位置进行边界数学？（啊）。

从我的（非常初步的）体验来看，这感觉更像是Processing，这使得制作漂亮，非交互式的东西变得非常容易，但却是开发UI的噩梦。

Answer 1

单独使用画布将是限制性的。 Canvas基本上是带有一些Graphics类方法的BitmapData。如果你想看看如何在没有flash的情况下做类似闪存的东西，你应该看看jquery和css3（参见2DTransform jquery插件）。

我已经成为Flash开发多年了，当我决定开始使用canvas和html5时，我会选择我在flash中创建的东西并尝试使用javascript html css等重新创建它们...你我会发现你使用jquery css和偶尔的画布可以快速完成你在flash中所做的大部分工作。

你可能会看到一个例子......也许你可以发布你在flash中做过的事情的链接，我会指出html5 / javascript / canvas等价物。

Answer 2

CanvasDemos工具部分列出了一些优秀的画布库和内容。特别感兴趣的是StrikeDisplay库，它基于AS3风格的概念，即将精灵添加到舞台上。

Answer 3

呃，嘿恩德。他们的错误怎么样？我写过StrikeDisplay，这是geckojsc在这里的回应中提到的。我认为它几乎解决了你所要求的问题;实质上是在AS3意义上创建“Sprites”，在单个canvas元素中无缝地创建自己的鼠标事件。它自动化canvas元素本身的所有矩阵操作，并在每个帧上重绘必要的形状，使用单色的辅助隐藏画布来捕捉点级鼠标位置和z顺序。（我想知道写Radi的那个人什么时候会抓住这个）。无论如何，我鼓励你检查一下，然后向我提出任何问题。它仍处于起步阶段，但是又一次，无论如何，在浏览器中绘制像素这一整个荒谬的想法，并没有人真正确定它的范例是什么。就我而言，AS3是一个不错的屏幕图形范例......

Answer 4

（编辑后）

忽略之前的版本，但 Canvas 是其他内容。

无论如何 - 您可以使用画布作为MVC结构中的视图。

M odel - JavaScript，也有OOP
V iew - 这将是画布
C ontroller - JavaScript侦听键和/或鼠标按下，ups

有什么不好的是你必须在JavaScript中重建一些基本的东西，在Flash中已经存在于API中。你需要：

一个数组 - 全局显示列表
一个DisplayItem类 - 这也将有“Children”，“Graphics”，“Bitmap”，position，z-order等基本变量
- 儿童 - 另一个DisplayItems数组
- 图形 - 您可以解析并告诉如何处理它的某种数据（绘制它）
- 位图 - 将使用的网址或实际图像对象...此图形或图形
- 位置 - x，y和旋转 - 这也应该在绘制时分配子项的位置
- Z-Order - 因此可以相应地对父列表进行排序
- 命中区域 - 这将是一些指定鼠标不应被忽略的数据
- 其他 - 您可能需要像currentFrame这样的动画，声音......
每当需要时渲染脚本触发 - 如果在当前状态下没有任何变化，请不要重绘，如果是在Timer（FPS）上只重绘所需区域（就像在Flash中一样），那么它将不会渲染
控制器 - 应检查鼠标位置，并查看该位置是否有任何DisplayItem，其中命中区域为正，如果存在 - 向模型触发事件（DisplayItem的脚本）

令人讨厌的是，这种API必须重写，但是很好......你得到了这个回报：

无需插件
现代浏览器中的快速性能
所有在一个文件中（如果需要）

你还没有获得Sockets，ByteArrays，3D功能的绘图API。

只是你决定是否要这样......

另外 - 显然有人已经/做了类似的事情......并且谈了一下为什么JavaScript + Canvas / CSS游戏只在起跑线上：

link

Answer 5

我强烈建议您查看Raphael javascript library

Answer 6

如果您已经熟悉Flash开发，那么您可能需要试用Flash Pro CC的新HTML5 Canvas doctype（自Dec＆＃39; 13开始提供）。

此链接概述了如何创建/重复使用在Flash Pro中创建的丰富图形/动画内容并直接发布到HTML5 Canvas： http://blogs.adobe.com/flashpro/2013/12/03/new_html5_canvas/

虽然所有图形和动画都可以从Flash Pro中轻松导出到HTML5，但您需要使用Javascript和CreateJS API而不是ActionScript来添加交互性。

显示对象模型和常见工作流程（如添加和播放符号，运行时实例化，带事件的逐帧动画，gotoAndPlay等）保持不变。此外，Javascript API与Actionscript非常相似，它也可以作为帧脚本使用。

这是另一个从Flash Pro中开始使用HTML5 Canvas开发的教程： http://blogs.adobe.com/flashpro/2013/12/18/actionscript-to-html5-flashpro-cc-2/

从Flash切换到<canvas> </canvas>的建议

显示列表

过滤器

面向对象岬

...以及更多

所以...只需使用大量`<canvas>` s？

6 个答案:

从Flash切换到<canvas> </canvas>的建议

显示列表

过滤器

面向对象岬

...以及更多

所以...只需使用大量<canvas> s？

6 个答案:

所以...只需使用大量`<canvas>` s？