类似于图像编辑器的HTML5 2D游戏引擎

Question

我有一个想法，一个应用程序/游戏具有类似的功能，作为一个图像编辑器。

我处理图形，我的编程能力很差，几乎没有。我希望它能相对容易地使用一些2D HTML5游戏引擎。

它应该做什么：

1. 图像混合模式-加和乘模式
2. 以颜色为界的填充区域。示例:用红色代替蓝色，用黑色边缘形状来定义。
3. 用鼠标/手指画
4. 按坡度计算的充填面积

哪个游戏引擎能完成这项工作？

Answer 1

首先，你可能不需要一个游戏引擎。看起来，您需要的是更多的对图形库。

按要求提出的要求：

1. 图像混合模式-加和乘模式有浏览器支持的各种globalCompositeOperation，包括multiply和lighter (添加)。
2. 填充区域边缘的颜色-例如:用红色替换蓝色，in是由黑色边缘定义的形状，您在这里描述的是一个洪水填埋场。浏览器中不支持洪流填充。然而，有一些很好的实现，如floodfill.js。它可能会与您为其他需求选择的任何解决方案相结合。
3. 通过鼠标/手指绘制，这是更多的涉及，因为我们正在谈论的是用户交互。然而，您并不是第一个对如何使用JavaScript在画布上进行手工绘制？感兴趣的人。最简单的实现是跟踪鼠标(使用onmousemove事件)并使用lineTo
4. 按渐变填充区域我们回到浏览器支持。您可以根据需要使用createLinearGradient或createRadialGradient。

因此，你所要求的不是虚构的领域。我看了一下你可能使用的图书馆。看起来，paper.js和processing.js是创建绘图工具的最佳选择。另一个值得研究的选项是fabric.js。

有一个库，开发人员广告，以创建游戏，您可能会发现有用。是EaselJS。

注:这些选项中没有一个有真正的洪水填充。它们提供的fill函数是指定您之后绘制的形状的填充，而不是填充已经绘制的区域。事实上，( JS游戏引擎列表(社区工作)中列出的所有库似乎都没有洪水泛滥。如果我们接受没有洪水的解决方案，请看一下Cocos2d。

当然，Processing.js是正在处理中的一个端口，它是作为学习(和教授)编程的工具设计的。考虑到你的programming skills are very poor, close to none，我建议试试这个。增编:使用Writing JavaScript-only Processing.js code在快速启动- JavaScript开发者版中描述的方法，这样您就可以轻松地集成其他javascript解决方案，比如洪水填充。