HTML5 canvas khung tiên tiến

Question

Tôi cần khuôn khổ HTML5 để làm:

• hòa đối tượng (ví dụ như hình chữ nhật)
• về sự kiện onmouseover của phong cách thay đổi đối tượng màu/biên giới
• trên nhấp chuột làm một số hành động js

thx

EDIT: tôi cuối cùng đã quyết định sử dụng raphaeljs (Alterna tive sẽ là dojo). Khung này thật tuyệt vời. (Không cần canvas HTML5 và sử dụng SVG)

Answer 1

Có vẻ như giao diện đồ họa của bạn là giao diện đồ họa retained mode, nơi bạn có thể tạo đối tượng, nhận sự kiện chuột, thay đổi thuộc tính, di chuyển v.v. và có trình duyệt đối phó với việc vẽ lại màn hình nếu cần. Trong trường hợp này, bạn sẽ tốt hơn với SVG thay vì <canvas>, mà là một bề mặt đồ họa immediate mode thực sự chỉ là một hộp đầy pixel.

Answer 2

Hãy nhìn vào câu hỏi này:

What is the current state of the art in HTML canvas JavaScript libraries and frameworks?

Fabric.js là mightly ấn tượng và CAKE cũng là một thư viện phong nha.

Answer 3

bHive thực hiện điều này thực sự độc đáo và đến từ một nền Actionscript tôi thấy nó khá dễ sử dụng, tôi đã phải nhìn vào trình diễn như tài liệu không hữu ích!

Để giúp bạn ..

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

Để làm bất cứ hành động chuột bạn cần phải thêm nó vào một đối tượng clip.

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

Sau đó

clip.add(square); 

thêm một sự kiện nghe

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

Trong vòng lặp bạn cần sau đó vẽ hình vuông.

clip.draw(); 

Tôi đang sử dụng mã nguồn của bản demo để giúp tôi trải qua rất có thể kiểm tra http://www.bhivecanvas.com/demos/cargame.php như có hiệu ứng Rollover và onclicks trong đó.

Answer 4

Đừng quên KineticJS, hoạt động tốt hơn nhiều so với những gì bạn đã đề cập, cộng với API đơn giản hơn nhiều