Tôi vừa mới bắt đầu một dự án bằng Canvas. Nhưng một trong những thứ tôi cần là theo dõi các hộp có thể di chuyển, có thể nhấp như trong ví dụ này: http://raphaeljs.com/graffle.html vì vậy tôi tự hỏi liệu Raphael-js + SVG có tốt hơn không.Ưu điểm và nhược điểm của HTML5 Canvas so với SVG + Raphael.js là gì?
Bạn sẽ sử dụng công cụ nào? Và tại sao?
Câu trả lời này được sao chép từ câu trả lời của tôi cho một câu hỏi khác. Nhưng OP sau đó đã thay đổi câu hỏi và do đó câu trả lời này trở nên ít liên quan đến nó. IMHO nó là phù hợp hơn cho câu hỏi này vì vậy đây đi:
Hãy suy nghĩ về sự khác biệt giữa vải và svg bằng chênh lệch betwee Photoshop và Illustrator (hoặc Gimp và Inkscape cho những người bạn OSS). Một giao dịch với bitmap và nghệ thuật vector khác.
Với canvas, vì bạn đang vẽ theo bitmap, bạn có thể làm mờ, làm mờ, ghi, né tránh hình ảnh của mình dễ dàng. Nhưng vì nó là bitmap, bạn không thể vẽ một đường dễ dàng và sau đó quyết định định vị lại đường kẻ. Bạn cần phải xóa dòng cũ và sau đó vẽ một dòng mới.
Với svg, vì bạn đang vẽ vectơ, bạn có thể dễ dàng di chuyển, chia tỷ lệ, xoay, đặt lại vị trí, lật bản vẽ của mình. Nhưng vì đó là vectơ, bạn không thể dễ dàng làm mờ các cạnh theo độ dày của đường hoặc liên kết chặt chẽ một vòng tròn màu đỏ thành một hình vuông màu xanh. Bạn cần mô phỏng làm mờ bằng cách vẽ các đa giác trung gian giữa các đối tượng.
Đôi khi trường hợp sử dụng của chúng trùng lặp. Ví dụ: rất nhiều người sử dụng canvas để vẽ các đường thẳng đơn giản và theo dõi các đối tượng dưới dạng cấu trúc dữ liệu trong javascript. Nhưng thực sự, cả hai đều phục vụ các mục đích khác nhau. Nếu bạn cố gắng thực hiện vẽ vector mục đích chung trong javascript tinh khiết trên đầu trang của canvas tôi nghi ngờ bạn sẽ nhanh hơn bằng cách sử dụng svg mà rất có thể được thực hiện trong C.
Đường dẫn Morphing svg hoàn toàn có thể thực hiện, ví dụ như hình tròn -> hình vuông màu xanh (mặc dù bạn sẽ đại diện cho các hình dạng là các phần tử đường dẫn). Lưu ý rằng svg cũng có các bộ lọc, việc thêm một hiệu ứng mờ không khó hơn nhiều việc thêm một thuộc tính và một định nghĩa bộ lọc trong tệp svg. –
@Erik: Tôi không nói về biến hình.Tôi đang nói về các hình dạng hòa trộn với nhau bằng cách làm mờ. Ví dụ, một hình ảnh (không phải hình ảnh động, hình ảnh tĩnh) của một vòng tròn màu đỏ pha trộn vào một hình vuông màu xanh sẽ có màu tím ở điểm mà chúng pha trộn và các cạnh hữu cơ mờ vào nhau. Điều này là đơn giản trong Photoshop và công cụ smudge nhưng khó làm trong Illustrator. – slebetman
@Erik: Ngoài ra, rất khó để thay đổi mức độ làm mờ tùy thuộc vào độ dày của đường bằng cách sử dụng bộ lọc đơn giản. Có thể có thể sử dụng nhiều bộ lọc nhưng chắc chắn là không tầm thường. – slebetman
Một vài điều cần quyết định - bạn có muốn công cụ của bạn làm việc trong trình duyệt di động? SVG (Raphael) sẽ không hoạt động trên Android (không biết về iphone). Ngược lại, nếu bạn muốn một cái gì đó sẽ làm việc với các phiên bản cũ của Internet Explorer, vải có thể không hoạt động (không chắc chắn nếu ExCanvas hỗ trợ IE6), nhưng SVG hiện ở một mức độ nào đó (Raphael hỗ trợ IE6).
Ngoài ra, bạn chỉ làm hình ảnh động/bản vẽ, hoặc bạn đang làm một ứng dụng thổi đầy đủ mà có thể cần những thứ như các nút, thanh trượt, container tab, danh sách, lưới vv
Nếu bạn đang tạo ra một hoàn chỉnh và bạn cũng muốn nó hoạt động trên các công cụ di động, bạn có thể xem bộ công cụ dojo, cụ thể dojox.gfx và các thư viện dojox đồ họa khác: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx là một thư viện đồ họa vector hỗ trợ một số phụ trợ: canvas , SVG, thậm chí là bạc. Dưới đây là một bài báo so sánh nó với raphael: http://www.lrbabe.com/?p=217
Check-out cũng cake.js cho một thư viện đồ thị cảnh độc lập cho vải: http://code.google.com/p/cakejs/ Và cũng kiểm tra processingjs.
Ah ... rất hữu ích khi biết: Android không hỗ trợ SVG/Raphael. – interstar
ExCanvas hỗ trợ IE6, nhưng hãy cẩn thận, nó không bao gồm tất cả chức năng của Canvas. Android sẽ hỗ trợ SVG trong bản phát hành trong tương lai. Hỗ trợ iPhone/iPad SVG IE không hỗ trợ SVG cho đến phiên bản 9. –
Ngoài ra, bài viết bạn trỏ đến đã quá một năm, do đó đã lỗi thời. –
RaphaelJS không chỉ * SVG và do đó sẽ hoạt động trong trình duyệt (tức là IE) không có Canvas (mặc dù có trình mô phỏng Canvas cho IE). – Ken