Tình trạng hiện tại của nghệ thuật trong các thư viện và khung công tác JavaScript canvas canvas HTML là gì? [đóng cửa]

Tôi hiện đang điều tra các tùy chọn để làm việc với canvas trong một ứng dụng HTML 5 mới và tự hỏi trạng thái hiện tại của các thư viện và khung JavaScript HTML canvas là gì?

Đặc biệt, có những khung công tác nào hỗ trợ những thứ cần thiết để phát triển trò chơi - hoạt ảnh phức tạp, quản lý đồ thị cảnh, xử lý sự kiện và tương tác người dùng không?

Cũng sẵn sàng xem xét cả sản phẩm thương mại và mã nguồn mở.

Tôi đang làm việc trên vải.js - một thư viện canvas để trợ giúp chính xác điều đó - thao tác các đối tượng trên canvas, bằng cách xử lý các sự kiện và tương tác của người dùng. Nó vẫn chưa được phát hành, nhưng hãy xem một bản demo xem trước đơn giản .

Bạn cũng có thể thấy nó hoạt động trong trình chỉnh sửa thiết kế này , nó được tạo ra ban đầu.

Chỉnh sửa: Dự án hiện đã có trên github (nguồn mở theo Giấy phép MIT)

Để bắt đầu, hãy xem:

• Demo (đơn giản và phức tạp, với mã để hiển thị cách chúng được thực hiện)
• Bài thuyết trình của Fabric.js tại FalsyValues (và một bài khác tại BK.js )
• Wiki trên github (bao gồm cả Câu hỏi thường gặp )
• Tài liệu
• Nhóm Google (hỏi bất kỳ câu hỏi nào ở đó)
• Fabric.js trên twitter (hoặc các câu hỏi ngắn qua twitter)
• Giới thiệu về Fabric.js: Phần 1 (bài viết trên ScriptJunkie)
• Giới thiệu về Fabric.js: Phần 2 (bài viết trên ScriptJunkie)

Làm thế nào để Fabric so sánh với các thư viện canvas Javascript khác? Đây là một bảng so sánh .

Tôi ngạc nhiên là không ai đề cập đến WebGL và các khuôn khổ được xây dựng trên đó. Tôi sẽ coi nó cao trong danh sách vì tính tiên tiến nhất dành cho đồ họa tăng tốc GPU 3D và hoạt ảnh phức tạp trên canvas / javascript HTML.

WebGL là tiêu chuẩn web đa nền tảng, miễn phí bản quyền cho API đồ họa 3D cấp thấp dựa trên OpenGL ES 2.0, được hiển thị thông qua phần tử HTML5 Canvas dưới dạng giao diện Mô hình đối tượng tài liệu. ...

WebGL mang 3D không có plugin lên web, được triển khai ngay trong trình duyệt. Các nhà cung cấp trình duyệt lớn Apple (Safari), Google (Chrome), Mozilla (Firefox) và Opera (Opera) là thành viên của Nhóm làm việc WebGL.

WebGL rất vững chắc trong việc hỗ trợ đồ họa tăng tốc GPU. Kiểm tra các bản trình diễn đổ bóng GLSL này . :-) Và xem ChemDoodle là một ví dụ về tương tác của người dùng.

Tôi đang làm việc trên một ứng dụng bằng cách sử dụng khung công tác O3D của Google , quản lý biểu đồ cảnh và sử dụng WebGL để kết xuất (trước đây nó sử dụng trình cắm của riêng mình). O3D là một công việc đang được tiến hành và tài liệu của nó không hoàn toàn được cập nhật, nhưng nó đang được phát triển tích cực và có một số bản demo tốt trên mạng . Hồ bơi 3D có thể ở gần con hẻm của bạn. Các nhà phát triển của Google rất trả lời các câu hỏi trong nhóm thảo luận.

Có một số khuôn khổ khác được xây dựng trên WebGL; xem ở đây . Những thứ đề cập đến phát triển trò chơi và đồ thị cảnh bao gồm Copperlicht, SceneJS, X3DOM.

WebGL chạy trong các phiên bản phát triển gần đây của một số trình duyệt , nhưng không chạy trên IE. Tôi đã sử dụng Firefox ("Minefield") và Chromium với kết quả tốt. Bạn sẽ cần một trong những thứ này để chạy các bản demo trên.

Tuy nhiên, nếu yêu cầu của bạn là nó phải không có phụ thuộc nào ngoài HTML 5 canvas / js, thì WebGL có thể không phải là lựa chọn phù hợp. Có vẻ như IE sẽ sớm hỗ trợ nó .

Cập nhật: sau khi đưa ra rất nhiều kháng cự, MS đã quyết định hỗ trợ WebGL trong IE 11 .

Three.js , bởi mr. doob , là một công cụ 3D tuyệt vời dành cho javascript bao gồm cảnh (cả phần mềm và WebGL / phiên bản tăng tốc phần cứng), đổ bóng, các hạt, hoạt ảnh được làm da (tôi nghĩ) và hiệu ứng ánh sáng. Kiểm tra xem, anh ta là một đồng nghiệp siêu tài năng.

Tôi nên nói thêm rằng bạn sẽ cần Google Chrome mới nhất hoặc tương đương để xem hầu hết các bản demo, một trong những bản trình diễn yêu thích của tôi là: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS là một thư viện mới nổi tự hào tạo và tạo hoạt ảnh cho các "lớp" riêng lẻ trên canvas để có hiệu suất cao.

http://www.kineticjs.com/

CAKE.js không còn được duy trì nhưng là một khung công tác khá mạnh mẽ - http://code.google.com/p/cakejs/

Các bản trình diễn tại đây - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Hãy nhìn vào khung xử lý. Ngoài ra, phiên bản mootools 2.0 sắp ra mắt có nghệ thuật projekt để làm việc với canvas

Raphael có vẻ là một thư viện canvas khá tốt; nó dựa trên SVG (hoặc dựa trên VML trong Internet Explorer) và do đó hỗ trợ rất nhiều sự kiện đầu vào của người dùng. Nó khá nhỏ (60kb gzipped), vì vậy không phải là sự phụ thuộc quá lớn.
Có vẻ như nó cũng có một tweener tốt: http://raphaeljs.com/reference.html#animate (xem ví dụ ở đây và đây ).

Để biết ví dụ về những gì nó có thể làm, hãy xem bản demo nhỏ thông minh này .

Hi vọng điêu nay co ich!

Tôi đã tìm thấy hai thư viện cực kỳ cạnh tranh và tốt hơn nhiều so với vải.

Kinetic.js và exeel.js đều có khả năng xử lý sự kiện, phân nhóm và trừu tượng hóa hình dạng chung cực kỳ tốt. Bạn sẽ tìm thấy rất nhiều thứ để yêu thích trong cả hai điều này; giá vẽ dường như có định hướng và lọc hình ảnh nhiều hơn.

Danh sách sự kiện của Fabric tệ hơn RẤT NHIỀU so với một trong hai thứ này - về cơ bản, nó coi toàn bộ canvas như một trình sắp xếp sự kiện lớn và cho bạn biết khi nào "Cái gì đó" đã được nhấp vào. Nó không đính kèm các sự kiện vào các hình dạng hoặc nhóm hình dạng riêng lẻ.

Có một thư viện thú vị nhằm mục đích cải thiện một số nguyên tắc cơ bản của việc làm việc với canvas API được gọi là canto.js của David Flanagan, tác giả của Javascript: The Definitive Guide .

Ngoài ra, khung công tác Javascript trẻ, nhưng không tồi, và nó (hoạt ảnh phức tạp, quản lý đồ thị cảnh, xử lý sự kiện và tương tác người dùng) tất cả về nó - jCanvaScript . Có thể là, ngoại trừ 'quản lý đồ thị cảnh'.

Bạn đã làm việc với bHive để tạo ra đồ thị và chuyển động tiêu đề trang web, có vẻ ấn tượng và mạnh mẽ, không giống như những người khác dường như đang được phát triển. Adobe Edge cũng đáng để trải nghiệm mặc dù không phải là Canvas.

http://www.bhivecanvas.com

và

http://labs.adobe.com/technologies/edge/

Aves Engine thực sự tuyệt vời: http://www.dextrose.com/en/projects/aves-engine

Ngoài ra, Akihabara có vẻ tốt: http://www.kesiev.com/akihabara/

Nếu bạn muốn sử dụng Javascript, Dojo là một cách tuyệt vời để sử dụng. Nó có một API đồ họa vector nhỏ gọn, đa nền tảng (SVG, VML, Canvas, Silverlight) rất mạnh mẽ. Bạn có thể tìm thấy nó trong dojo.gfx và dojox.gfx.

Chúng tôi đã sử dụng điều này để xây dựng một trợ giảng vật lý tương tác cho phép sinh viên vẽ vectơ, hình elip, v.v. (thậm chí nối hình ảnh) và thực hiện tất cả các loại phép biến đổi trên chúng. Bạn có thể xem những gì chúng tôi đã làm tại http://gideon.eas.asu.edu/web-UI/login.html - chỉ cần đăng nhập bằng bất kỳ tên người dùng nào.

Tôi đã xem qua vải.js và dojox.drawing thực hiện rất nhiều điều tương tự. Nếu bạn xem các bài kiểm tra trong bộ công cụ (khi bạn đã có nó dojox / draw / tests /), bạn sẽ tìm thấy các ví dụ về mọi thứ từ đồ họa vector đến hình ảnh cho đến các bóng được tạo lập trình.

Tôi ấn tượng với Akihabara như một công cụ trò chơi. Nó có tài liệu tuyệt vời dưới dạng hướng dẫn và một api. Tôi thậm chí đã thấy trên một số bảng tin nói về bản phát hành akihabara 2. Thật không may, tất cả những gì nói về một năm hoặc hơn. Tôi thực sự hy vọng động cơ này vẫn đang được phát triển.

Tôi vừa phát hành phiên bản đầu tiên của thư viện bản vẽ & tweening mới hướng đến những người có nền tảng phát triển AS3 / Flash. Mặc dù lib của tôi vẫn chưa hỗ trợ các đường vẽ hoặc đồ thị phức tạp, nhưng tôi hy vọng nó sẽ giúp mọi người nhanh chóng vẽ và tạo hoạt ảnh cho các nguyên mẫu cơ bản theo cách quen thuộc.

Phản hồi và nhận xét được hoan nghênh. http://www.quietless.com/kitchen/introductioning-js3/