2013-03-18 48 views
5

Tôi đang gặp sự cố khi vẽ hình ảnh phức tạp bằng thẻ canvas và sử dụng JavaScript.Trình chỉnh sửa cho khung vẽ

Tôi cần một công cụ hoặc có thể nói trình chỉnh sửa bằng cách sử dụng để tôi có thể vẽ bất kỳ hình ảnh nào. Nó trả về mã Javascript bằng cách sử dụng canvas, mà tôi có thể bao gồm trong các trang html.

Cảm ơn!

Trả lời

5

Đối với hình ảnh thực sự phức tạp, hãy sử dụng Adobe Illustrator để thực hiện thiết kế (trình chỉnh sửa thiết kế đẳng cấp thế giới).

Sau đó lưu hình ảnh của bạn ở định dạng .SVG.

BTW, Bạn có thể tải tệp (ví dụ "yourArt.svg") trực tiếp vào thẻ img.

Nhưng, với câu hỏi của bạn, bạn có thể sử dụng thư viện vẽ canvas gọi là FabricJS để đọc svg và vẽ nó vào canvas. Trang web của thư viện là: http://fabricjs.com/

Hoặc, bạn có thể sử dụng công cụ chuyển đổi trực tuyến để chuyển đổi từ Art.svg sang các lệnh vẽ canvas bắt buộc. Bộ chuyển đổi svg-to-canvas phổ biến là: http://www.professorcloud.com/svg-to-canvas/

Các kỹ thuật này có thể yêu cầu tinh chỉnh lệnh vẽ canvas - đặc biệt nếu tác phẩm nghệ thuật của bạn sử dụng các kỹ thuật nâng cao hơn trong Illustrator.

Tác phẩm nghệ thuật của bạn có thể rất phức tạp và vẫn được xử lý! Kiểm tra phần SVG của các bản trình diễn FabricJS: http://fabricjs.com/kitchensink/

+0

Nhìn xung quanh một chút điều này dường như tùy chọn thực tế duy nhất nếu bạn muốn tạo và thao tác một số hình dạng phức tạp. Và các công cụ cho SVG (hoặc định dạng đồ họa vector khác) thực sự là đỉnh cao. –

+0

Một công cụ khác mà bạn có thể sử dụng là [Microsofts Expression Design] (http://msdn.microsoft.com/en-US/expression) có vẻ miễn phí ngay bây giờ. Có tùy chọn để xuất sang SVG. –

8

Tôi có một dự án nơi bạn có thể vẽ các hình dạng canvas phức tạp và xuất chúng thành một tệp HTML. Sau đó bạn có thể chỉnh sửa file theo yêu cầu

dự án của tôi là tại http://canvimation.github.com/

Hy vọng điều này là sự giúp đỡ

+1

wow !! dơi gr8 prject thực sự .. – Anurag

+0

đây là một người đàn ông công cụ tuyệt vời, nhờ chia sẻ, đã được khum –

2

Một công cụ trực tuyến lớn được gọi HTML Canvas Studio.

Nó hoạt động giống như các chương trình vẽ khác và khi bạn hoàn thành, bạn có thể xuất bản vẽ sang HTML + JS.

Công cụ này có thể được tìm thấy ở đây:http://www.htmlcanvasstudio.com/

Các vấn đề liên quan