8

我需要 HTML5 画布框架来做：

  • 绘制对象（例如矩形）
  • 在对象的 onmouseover 事件上更改颜色/边框样式
  • 点击做一些js动作

谢谢

编辑：我终于决定使用raphaeljs（替代方案是dojo）。这个框架很棒。（它不需要 HTML5 画布并使用 SVG）

4

4 回答 4

8

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

于 2010-10-10T11:47:37.820 回答
6

不要忘记 KineticJS，它的性能比你提到的要好得多，而且它有一个更简单的 API

于 2012-02-05T03:08:00.103 回答
1

看看这个问题：

HTML canvas JavaScript 库和框架的最新技术是什么？

Fabric.js 令人印象深刻，CAKE 也是一个不错的库。

于 2010-10-11T16:08:16.227 回答
0

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，因为其中包含翻转和点击。

于 2011-09-27T18:37:36.640 回答