Công cụ thiết kế canvas HTML
|
Bạn đang tìm kiếm bảng trắng nhiều người dùng hoặc muốn được trợ giúp xây dựng ứng dụng web dựa trên bản vẽ? Show
Canvas theo nghĩa đen là một tiện ích vẽ HTML5, mã nguồn mở (được cấp phép BSD) có thể mở rộng. Sự phụ thuộc duy nhất của nó là React. js. Bạn có thể sử dụng nó để nhúng bảng vẽ vào các trang web. Nó giống như một MS Paint có thể mở rộng trong JavaScript. Người dùng có thể phác thảo bản vẽ và bạn có thể làm những gì bạn thích với kết quả. đi kèm với một plugin jQuery dễ sử dụng Cảnh báo Nghĩa đen là Canvas không được duy trì. Nó sử dụng các công cụ xây dựng lỗi thời và không được cải thiện nhiều trong nhiều năm. Nhiều người vẫn thấy nó hữu ích, nhưng nếu bạn áp dụng nó, bạn sẽ viết các bản sửa lỗi của riêng mình Các tính năng chính của Canvas theo nghĩa đen bao gồm
Bạn có thể quyên góp cho sự phát triển của Literally Canvas trên Gratipay hoặc đăng tiền thưởng trên vấn đề GitHub trên Bountysource. Mặt khác, những cải tiến tự phát rất hiếm, mặc dù chúng có xảy ra Ghi chú Danh sách gửi thư của chúng tôi đã ngừng hoạt động trong vài tháng. Bạn sẽ cần đăng ký lại bằng một trong các phương pháp trong thanh bên
Tại sao?
Tính tương thích của trình duyệt web Trình duyệt Chrome √ Cuộc đi săn √ iOS √ FastClick giúp Firefox 4+ √ IE10+ √ Dấu gạch ngang dòng chỉ được hỗ trợ trong 11+ Ô-pê-ra ?? Android ?? chú thích iOS trì hoãn các sự kiện nhấp chuột để có thể phát hiện cử chỉ. Để tắt hành vi này và nhận các sự kiện đó ngay lập tức, hãy sử dụng FastClick Đóng góp Chúng tôi rất vui khi thấy sự đóng góp dưới mọi hình thức. Bàn chải mới, tối ưu hóa, yêu cầu tính năng, trường hợp sử dụng, thiết kế, báo cáo lỗi - bạn đặt tên cho nó, chúng tôi muốn nó. Chỉ cần truy cập GitHub và bắt đầu Nghĩa đen Canvas được phát triển bởi các tình nguyện viên cho vui. Nếu thiếu tính năng hoặc khả năng tương thích là vấn đề nghiêm trọng đối với bạn, thì giải pháp cho vấn đề của bạn có thể là giúp chúng tôi viết mã Cảm ơn BrowserStack BrowserStack đã hào phóng tài trợ để đảm bảo rằng Literally Canvas hoạt động trong nhiều môi trường nhất có thể. Nếu bạn quan tâm đến khả năng tương thích của ứng dụng, bạn nên kiểm tra. Trong trường hợp bạn đã sống dưới một tảng đá trong vài năm qua, phần tử canvas trong đặc tả HTML5 khá đơn giản để hiểu. Về cơ bản, đó là một khu vực hình chữ nhật trong trang của bạn, nơi bạn có thể sử dụng JavaScript để vẽ bất kỳ thứ gì bạn chọn Theo đúng nghĩa đen, đó là một “bức tranh canvas” kỹ thuật số mà bạn có thể sử dụng để hiển thị đồ họa trò chơi, đồ thị, hoạt ảnh và các hình ảnh trực quan khác một cách nhanh chóng. Điều này về cơ bản loại bỏ nhu cầu về các loại kết xuất đồ họa và hoạt hình trực tuyến khác (như Flash) và tương thích hơn nhiều trên các nền tảng và thiết bị Hy vọng rằng bạn đã biết tất cả những điều đó. Mặc dù ý tưởng cơ bản đằng sau Canvas rất đơn giản nhưng thực sự làm việc với nó có thể phức tạp hơn một chút. Vì vậy, đây là một số tài nguyên tuyệt vời để giúp bạn bắt đầu
học canvasNếu bạn hoàn toàn mới sử dụng canvas, bạn có thể muốn bắt đầu với một trong những hướng dẫn hữu ích này. Có hàng trăm hướng dẫn và hướng dẫn ngoài kia, nhưng ba hướng dẫn này hầu như cung cấp mọi thứ mà người mới bắt đầu muốn biết về canvas trước khi bắt đầu Đi sâu vào HTML5Đi sâu vào HTML5 có một chương tuyệt vời về cách làm việc với canvas bao gồm định nghĩa cơ bản và thông tin về cách xây dựng các hình đơn giản, tọa độ canvas, đường dẫn, văn bản, v.v. Mạng lưới nhà phát triển MozillaMạng lưới nhà phát triển Mozilla có hướng dẫn rất kỹ lưỡng về canvas bao gồm các khái niệm cơ bản, vẽ hình, sử dụng hình ảnh, áp dụng kiểu và màu sắc, chuyển đổi, kết hợp, v.v. Hướng dẫn Canvas HTML5Hướng dẫn HTML5 Canvas có chính xác những gì tiêu đề gợi ý. hàng tấn hướng dẫn sử dụng canvas bao gồm mọi thứ từ đường dẫn và đường cong đến hình ảnh, văn bản, v.v.
Công cụ, khung và thư việnCanvas có thể được sử dụng cho nhiều mục đích khác nhau nhưng ứng dụng và trò chơi là phổ biến nhất. Đặc biệt, trò chơi là cách sử dụng canvas cực kỳ phổ biến, với hàng tấn công cụ trò chơi có sẵn Bất kể bạn muốn làm gì với canvas, các công cụ và tài nguyên khác bên dưới sẽ giúp bạn bắt đầu hoạt hìnhAnimatron là một công cụ cao cấp để tạo hoạt ảnh HTML5 mà không cần mã hóa. Nó có giao diện người dùng được sắp xếp hợp lý, hỗ trợ các dự án tự lưu trữ (vì vậy bạn có thể tải xuống các tệp HTML5, JavaScript và tài nguyên để kiểm soát hoàn toàn), có các công cụ cộng tác thời gian thực và hỗ trợ cả dự án công khai và riêng tư Gói miễn phí hỗ trợ tối đa 20 dự án công cộng, trong khi gói trả phí cung cấp cho bạn nhiều dự án hơn và các tính năng khác, chỉ từ $6/tháng  MixeekMixeek là một công cụ hoạt hình hoàn toàn dựa trên CSS3, HTML5 và JavaScript. Nó có một công cụ thiết kế trực tuyến dễ sử dụng và rất trực quan. Và các hoạt ảnh mà nó tạo ra được hỗ trợ trên IE, Firefox, Chrome, Opera và Safari, cũng như các trình duyệt di động Mixeek hoàn toàn miễn phí sử dụng bán kínhRadi cho phép bạn tạo video, hoạt ảnh và đồ họa thời gian thực mà không cần học viết mã. Nó hoạt động với cả canvas và thẻ video, đồng thời hỗ trợ nhiều loại lớp nội dung bao gồm hình ảnh, phim, hình dạng, văn bản, v.v. Và tất nhiên nó hỗ trợ các yếu tố tương tác. Bạn có thể tải xuống bản thử nghiệm Radi miễn phí ChơiCanvasPlayCanvas là một công cụ trò chơi WebGL dễ sử dụng, mã nguồn mở và miễn phí. Nó bao gồm một công cụ vật lý (với sự hỗ trợ cho các vật thể cứng, trình kích hoạt, phương tiện và khớp nối), công cụ đồ họa (với sự hỗ trợ cho hiệu ứng ánh sáng, bóng đổ và hậu kỳ trên mỗi pixel), v.v. PlayCanvas cũng bao gồm các công cụ phát triển cộng tác và thậm chí bao gồm dịch vụ lưu trữ miễn phí cho các trò chơi của bạn xây dựng 2Construct 2 là một công cụ chơi game được thiết kế dành riêng cho các trò chơi 2d. Thật tuyệt vời cho tất cả mọi người, từ những người có sở thích bình thường đến nhà phát triển chuyên nghiệp, những người muốn tạo các nguyên mẫu và mô hình mô phỏng nhanh hơn hoặc thậm chí tiết kiệm thời gian viết mã cho sản xuất. Nó bao gồm hỗ trợ cho các hành vi linh hoạt, xem trước tức thì, hệ thống sự kiện mạnh mẽ và khả năng mở rộng dễ dàng. Và tất nhiên, trò chơi của bạn có thể được xuất sang nhiều nền tảng khác nhau. Bạn có thể tải xuống phiên bản miễn phí với chức năng hạn chế (hoàn hảo để dùng thử) hoặc mua giấy phép với giá dưới 130 đô la Giá vẽJSlà một thư viện JavaScript giúp làm việc với phần tử canvas dễ dàng hơn. API của nó quen thuộc với các nhà phát triển Flash, nhưng với độ nhạy của JavaScript. Nó bao gồm lồng đối tượng, mô hình tương tác chuột, v.v. Có các bản trình diễn để giúp bạn bắt đầu mọi thứ, từ kéo và thả đến trang tính ma đến bộ lọc và mặt nạ vector phaserPhaser là một khung nguồn mở nhanh và miễn phí hỗ trợ JavaScript và TypeScript. Nó sử dụng WebGL và canvas, đồng thời hỗ trợ hoạt ảnh, hạt, máy ảnh, chia tỷ lệ thiết bị, bản đồ ô vuông, v.v. Số ba. jsSố ba. js là một thư viện JavaScript giúp dễ dàng làm việc với WebGL dễ dàng hơn nhiều. Nó đơn giản hóa đáng kể mã của bạn và được ghi lại rất kỹ lưỡng. Có rất nhiều ví dụ tuyệt vời về cách nó được sử dụng trong thực tế, kể cả trên các trang web như vậy dành cho phim The Hobbit và hơn thế nữa TurbulenzTurbulenz là một công cụ chơi trò chơi HTML5 mà bạn có thể sử dụng để tạo, thử nghiệm và thậm chí kiếm tiền từ trò chơi. Turbulenz bao gồm hai phần. động cơ và SDK. Công cụ hỗ trợ kết xuất các hiệu ứng và hạt, công cụ vật lý (bao gồm hỗ trợ va chạm và hoạt ảnh), quản lý tài nguyên và cảnh, v.v. SDK bao gồm các mẫu, tài liệu, trình xem, công cụ xử lý nội dung cũng như tài nguyên triển khai và đóng gói MelonJSMelonJS tích hợp dạng Tiled map giúp thiết kế các level nhanh hơn và hợp lý hơn. Nó được thiết kế như một thư viện đơn giản, miễn phí, độc lập để phát triển các trò chơi 2D tương thích với tất cả các trình duyệt chính. Nó sử dụng thuật toán va chạm dựa trên đa giác và phát hiện va chạm pha rộng bằng cách sử dụng phân vùng không gian. Nó cũng bao gồm các hiệu ứng tween và chuyển tiếp, cũng như các hệ thống hoạt hình và hạt cơ bản ngũ sắcQuintus là một công cụ trò chơi đa nền tảng dễ sử dụng cho phép bạn tạo trò chơi với ít mã hơn. Trò chơi ví dụ trên trang web của họ sử dụng khoảng 80 dòng mã để tạo một trò chơi kiểu platformer khá tuyệt vời. Quintus có đầy đủ tài liệu và có một cộng đồng để giúp bạn nếu bạn cần hỗ trợ Xảo tráCrafty cho phép bạn kết xuất bằng canvas hoặc DOM. Nó sử dụng một hệ thống thành phần thực thể để phát triển trò chơi, tránh chuỗi kế thừa dài. Nó cũng bao gồm rất nhiều thành phần gốc cho hoạt ảnh, hiệu ứng, âm thanh, đầu vào, v.v. Nó có tính năng phát hiện va chạm SAT nâng cao, tương thích với nhiều trình duyệt và hỗ trợ bản đồ sprite để vẽ các thực thể trò chơi dễ dàng hơn VôiJSLimeJS là một khung trò chơi HTML5 để xây dựng các trò chơi giống như bản địa cho các thiết bị hiện đại. Đó là tài liệu tốt, với một cộng đồng để hỗ trợ thêm. Nó bao gồm các chức năng cho bố cục, nút, hình dạng và tô màu, sự kiện, hoạt ảnh, v.v. KineticJSKineticJS là một khung hiệu suất cao để xây dựng hoạt ảnh, chuyển tiếp, lồng nút, phân lớp, lọc, xử lý sự kiện, v.v. với canvas HTML5 và JavaScript dành cho ứng dụng dành cho thiết bị di động và máy tính để bàn. Nó được ghi chép đầy đủ và có rất nhiều ví dụ đã có sẵn bHivebHive là một khung canvas giúp dễ dàng tạo hoạt ảnh, trò chơi, ứng dụng và trải nghiệm người dùng phong phú. Nó bao gồm hỗ trợ vẽ, hoạt ảnh và tương tác, với các bản trình diễn và ví dụ cũng như tài liệu Giấy. jsGiấy. js là một khung kịch bản đồ họa vector chạy trên canvas. Nó có các tính năng mạnh mẽ để làm việc với đồ họa vector và các đường cong bezier, tất cả được gói gọn trong một giao diện lập trình rõ ràng, nhất quán. Phần lớn nó tương thích và dựa trên Scriptographer (một môi trường viết kịch bản cho Adobe Illustrator). Nó rất dễ học nếu bạn là người mới bắt đầu đồng thời có nhiều tính năng dành cho người dùng nâng cao hơn Sợi vải. jsSợi vải. js là một thư viện canvas JavaScript HTML5 đơn giản nhưng mạnh mẽ, cung cấp một mô hình đối tượng tương tác trên phần tử canvas. Nó thậm chí còn bao gồm trình phân tích cú pháp SVG-to-canvas (và ngược lại). Bạn có thể tạo và thêm các đối tượng trên canvas, bao gồm hình ảnh, hình dạng phức tạp, văn bản, v.v. điểm ảnh ba chiều. jsđiểm ảnh ba chiều. js là bộ công cụ xây dựng trò chơi 3D mã nguồn mở. Nó giúp tạo các trò chơi voxel như Minecraft trong trình duyệt dễ dàng hơn. Nó được chia thành nhiều thành phần, vì vậy bạn chỉ có thể sử dụng những gì bạn cần thay vì một khung trò chơi khổng lồ, cồng kềnh Trò chơi{Đóng cửa} DevKitGame{Closure} DevKit giúp xây dựng trò chơi dễ dàng và nhanh hơn với tốc độ tự nhiên. Đó là JavaScript 100%, với mã đã qua thử nghiệm thực chiến đã được triển khai trên toàn thế giới. Nó có thể được sử dụng với trình soạn thảo văn bản và trình duyệt yêu thích hiện tại của bạn mà không cần các công cụ hoặc tải xuống chuyên dụng khác. Và vì nó sử dụng OpenGL cho các trò chơi di động nên chúng có tốc độ gốc trên Android và iOS Công cụ trò chơi IsogenCông cụ trò chơi Isogen là một công cụ trò chơi nhiều người chơi HTML5 tiên tiến được sử dụng bởi một số tên tuổi lớn, bao gồm cả BBC. Nó bao gồm hỗ trợ 2D và đẳng cự, với các bộ phát hạt, tweening và hoạt hình dựa trên tế bào. Và không giống như các công cụ trò chơi “nhiều người chơi” khác chỉ đưa vào thư viện mạng, Isogen có chức năng nhiều người chơi trong thời gian thực và tiên tiến hơn bất kỳ công cụ trò chơi HTML5 nào khác hiện có mê hoặc. jsmê hoặc. js là một khung đơn giản để xây dựng trò chơi và ứng dụng bằng HTML5 và JavaScript. Nó đã được sử dụng trên hơn 1.000 trò chơi và ứng dụng, đồng thời có nhiều tài liệu hỗ trợ. Nó hướng đối tượng, đa nền tảng và hướng sự kiện, hoàn chỉnh với công cụ hoạt hình, hỗ trợ WebGL, thư viện nội dung, v.v. Công cụ trò chơi WadeWade Game Engine giúp dễ dàng tạo trò chơi cho máy tính để bàn và thiết bị di động, đồng thời được xây dựng để hoạt động tốt trên cả hai. Wade có kiến trúc mô-đun để bạn có thể nhanh chóng tạo bất kỳ loại trò chơi nào bạn cần. Nó có một mô-đun cơ sở để linh hoạt, một mô-đun vật lý cho các trò chơi cần chúng, một mô hình đẳng cự cho các game nhập vai và chiến lược, v.v. LycheeJSLycheeJS là một công cụ trò chơi HTML5 và OpenGL gốc dành cho các trò chơi được nhúng, bảng điều khiển, thiết bị di động, máy chủ và máy tính để bàn. Nó hỗ trợ các bố cục đáp ứng và bao gồm một hiệu ứng và công cụ tween, công cụ vật lý Verlet, công cụ hạt, công cụ hoạt hình sprite, công cụ phông chữ bitmap, v.v. Nó cũng bao gồm công nghệ websockets cho các trò chơi nhiều người chơi Bản đồ nhiệt. jsBản đồ nhiệt. js là một thư viện đơn giản để tạo bản đồ nhiệt JavaScript bằng canvas HTML5. Đây là thư viện trực quan hóa bản đồ nhiệt tiên tiến nhất trên web, với dung lượng rất nhẹ (dưới 3kB gzip) và có sẵn hỗ trợ cao cấp Đồ thị. jsĐồ thị. js cho phép bạn tạo các biểu đồ đơn giản, rõ ràng, hấp dẫn bằng cách sử dụng canvas và JavaScript. Có sẵn sáu loại biểu đồ, không phụ thuộc, phản hồi nhanh, mô-đun và tương tác Phần kết luậnBất kể kế hoạch của bạn với canvas là gì, các tài nguyên ở đây sẽ giúp bạn đi đúng hướng. Xây dựng trò chơi, ứng dụng và thêm hoạt ảnh hoặc tính tương tác vào trang web của bạn trở nên dễ dàng hơn rất nhiều với thư viện canvas, khung và công cụ trò chơi |
