2010-08-24 25 views
24

Có thể sử dụng jQuery với phần tử HTML5 <canvas> không? Hay tôi phải làm điều đó với JavaScript đơn giản?Canvas và jQuery?

Tôi chỉ tự hỏi, bởi vì tôi nghĩ rằng tôi có thể tiết kiệm rất nhiều thời gian với việc sử dụng jQuery, nhưng tôi không có đầu mối về việc sử dụng phần tử của <canvas>, vì vậy có thể hoàn toàn không thể!

Bất cứ ai cũng biết nếu tôi có thể sử dụng jQuery cho điều này không?

+0

Bạn có thể tìm thấy plugin này hữu ích: http://iwhitcomb.github.io/dynamocanvas/ –

Trả lời

21

Bạn có thể sử dụng jQuery để select phần tử canvas, nhưng bạn phải sử dụng các phương pháp riêng của nó. Một khởi đầu tốt đẹp sẽ là https://developer.mozilla.org/en/canvas_tutorial.

+0

OK, đó thực sự sẽ tiết kiệm rất nhiều thời gian thực sự, thay vì của tất cả những gì getElementbyID hoặc bất cứ điều gì nó được. Vì vậy, nếu thư viện jQuery là "mở rộng" hoặc bất cứ điều gì bạn gọi là thuật ngữ, nó sẽ có thể tận dụng jQuery với '' trong tương lai? Hoàn toàn, ý tôi là. – Qcom

+0

* Tại sao * bạn không thể sử dụng các phương pháp riêng của canvas? –

+0

Tôi không nói rằng tôi không thể, tôi đoán những điều đó tách biệt hoàn toàn với JavaScript? – Qcom

3

Hãy xem Raphaël. Đây là dự án tốt nhất mà tôi đã nhìn thấy cho đến nay bằng cách sử dụng một cái gì đó tương tự như vải (do đó được hỗ trợ trong tất cả các trình duyệt chính) và Javascript (JQuery).

+3

không phải là Raphael sử dụng SVG? – jAndy

+0

có. Nó cũng sử dụng VML với Internet Explorer (tôi đang trên Linux, vì vậy tôi không biết và cũng không quan tâm nhiều những gì IE thực hiện hiện nay hỗ trợ ... Raphaël làm việc với IE 6+ và điều này là đủ tốt với tôi). Tôi đã sửa chữa câu trả lời của tôi bởi vì nó có hiệu quả gây hiểu nhầm. :) –

13

jQuery là bộ công cụ để tương tác và thao tác DOM cộng với một số phương pháp ajax bổ sung gọn gàng. Raphael và/hoặc Protovis là bộ công cụ để hiển thị.

Processing.js là bộ công cụ trực quan hóa dành riêng cho phần tử canvas.

jQuery có một chuyên môn, các bộ công cụ khác có chuyên môn khác, mặc dù nó rất nhiều có thể sử dụng bộ công cụ chuyên môn với nhau;)

+0

Tôi thích cách bạn diễn đạt điều đó, cảm ơn. – Qcom

6

Câu trả lời trực tiếp là không vì jQuery được dựa trên DOM truy vấn và thao tác. Các phần tử Canvas được vẽ bằng cách sử dụng API Canvas với JavaScript. Nếu bạn đang tìm kiếm một thư viện canvas tốt, bạn có thể dùng thử KineticJS. Nó bổ sung thêm hỗ trợ hoạt hình và sự kiện cho các ứng dụng canvas.

0

câu trả lời là có. bạn cần phải sử dụng JavaScript đơn giản ..

thế nào bao giờ có một jQuery plug-in mà đã có ích cho tôi: http://calebevans.me/projects/jcanvas/

nó mang lại cho bạn truy cập vào khung bằng cách sử dụng định dạng jQuery mà chúng ta đang sử dụng cho.

0
var canvas=($('<canvas width="200" height="1"></canvas>'))[0]; 
+1

Hiện tại, câu trả lời này được liệt kê dưới dạng bài đăng chất lượng thấp. Chúng tôi không thực sự khuyến khích một câu trả lời chỉ có mã vì nó có thể gây nhầm lẫn cho người khác. Sẽ tốt hơn nếu bạn có thể cải thiện câu trả lời này, có thể bằng cách giải thích nó một chút. –

5

jCanvas

Ngoài việc sử dụng jQuery để chọn vải và sau đó sử dụng được xây dựng trong phương pháp vải, bạn cũng có thể kiểm tra jCanvas, mà là một "nice" wrapper quanh API vải mà bạn có thể tìm thấy dễ dàng hơn/tốt hơn/rõ ràng hơn. Tôi biết tôi làm được.

Đây là những gì nó trông giống như:

// Draw a circle 
$("canvas").drawArc({ 
    draggable: true, 
    fillStyle: "green", 
    x:   100, 
    y:   100, 
    radius: 50 
}); 
Các vấn đề liên quan