HTML5画布高级框架

Question

我需要一个HTML5画布框架来完成以下任务：

• 绘制对象（例如矩形）
• 在对象的onmouseover事件中更改颜色/边框样式
• 单击时执行一些js操作

谢谢

编辑：我最终决定使用raphaeljs（另一种选择是dojo）。这个框架非常棒。（它不需要HTML5画布，而是使用SVG）

- ChRapO

Answer 1

听起来你真正想要的是保留模式图形界面，你可以在其中创建对象，在其上获取鼠标事件，更改其属性，移动等等，并且让浏览器根据需要重新绘制屏幕。在这种情况下，你最好使用SVG而不是<canvas>，因为它作为立即模式图形表面实际上只是一个充满像素的盒子。

- bobince

---

是的，SVG 是最简单的方法。据我所知，没有画布库支持您想要的事件检测类型。 - Jani Hartikainen

Answer 2

不要忘记 KineticJS，它的性能比你提到的其他库要好得多，而且它的 API 更加简单易用。

- Eric Rowell

Answer 3

看一下这个问题：

HTML画布JavaScript库和框架的最新技术发展现状是什么？

Fabric.js非常出色，CAKE也是一个不错的库。

- Castrohenge

---

谢谢，我已经尝试过Fabric.js了。它非常棒，但是开发者们没有解决动画和事件问题（至少不作为常规功能）。 - ChRapO

不，项目已经停止了，存在问题。但是当前的功能还是很好的。 - ChRapO

Answer 4

bHive做得非常好，作为一个Actionscript背景下的开发者，我觉得它很容易使用。不过，由于文档并不是很有帮助，我不得不查看演示文稿来学习。

为了帮助你...

square = engine.createShape({
    shape: 'square',
    style: 'filled',
    backgroundColor: '#000',
    width: 120,
    height: 20,
    x: 20,
    y: 100
});

要执行任何鼠标操作，您需要将其添加到剪辑对象中。

clip = engine.createClip({ x: 20, y: 20 });

那么

clip.add(square);

添加事件监听器

clip.addEventListener('onmouseover',function(e) { some code ... });
clip.addEventListener('onclick',function(e) { some code ... });

在循环中，您需要绘制正方形。

clip.draw();

我正在使用演示的源代码来帮助自己，所以也许可以查看http://www.bhivecanvas.com/demos/cargame.php，因为它包含了鼠标悬停和点击事件。

- ZonerTone