Html sang canvas hoạt động như thế nào?
Phần tử HTML5 cung cấp cho bạn một cách dễ dàng và mạnh mẽ để vẽ đồ họa bằng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo bố cục ảnh hoặc tạo hoạt ảnh đơn giản (và không đơn giản như vậy) Show Đây là một phần tử đơn giản chỉ có hai thuộc tính cụ thể chiều rộng và chiều cao cộng với tất cả các thuộc tính HTML5 cốt lõi như id, tên và lớp, v.v. Bạn có thể dễ dàng tìm thấy phần tử đó trong DOM bằng cách sử dụng phương thức getElementById() như sau - var canvas = document.getElementById("mycanvas"); Chúng ta hãy xem một ví dụ đơn giản về cách sử dụng phần tử trong tài liệu HTML5 Điều này sẽ tạo ra kết quả sau - Bối cảnh kết xuấtBan đầu, nó trống và để hiển thị nội dung nào đó, trước tiên tập lệnh cần truy cập vào ngữ cảnh kết xuất và vẽ trên đó Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để lấy ngữ cảnh hiển thị và các chức năng vẽ của nó. Hàm này nhận một tham số, loại context2d Sau đây là mã để nhận ngữ cảnh bắt buộc cùng với kiểm tra xem trình duyệt của bạn có hỗ trợ phần tử hay không - var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } Hỗ trợ trình duyệtCác phiên bản mới nhất của Firefox, Safari, Chrome và Opera đều hỗ trợ HTML5 Canvas nhưng IE8 không hỗ trợ canvas nguyên bản Bạn có thể sử dụng ExplorerCanvas để có hỗ trợ canvas thông qua Internet Explorer. Bạn chỉ cần bao gồm JavaScript này như sau - Phần tử canvas HTML được sử dụng để vẽ đồ họa “raster” trên ứng dụng web. API Canvas cung cấp hai ngữ cảnh vẽ. 2D và 3D, và trong hướng dẫn này, chúng ta sẽ nói về cái 2D (tôi sẽ gọi nó là API Canvas cho đơn giản) Trước khi bắt đầu, tôi muốn bạn biết một điểm rất quan trọng. Canvas là API đồ họa raster — bạn thao tác nội dung ở cấp độ pixel. Điều đó có nghĩa là phần mềm cơ bản không biết mô hình bạn đang sử dụng để hiển thị ngữ cảnh của bạn — nó không biết bạn đang vẽ hình chữ nhật hay hình tròn Tôi đã chia API Canvas thành các phần riêng biệt để bạn có thể ngấu nghiến từng phần một
Để kích hoạt hướng dẫn Canvas của bạn, hãy tạo tệp HTML và tệp JS được liên kết với tệp đó
Trong tệp 5 của bạn, Đường dẫnĐường dẫn là tập hợp các điểm trong lưới pixel 2D trong canvas. Chúng được vẽ với sự trợ giúp của API này. Mỗi hình dạng trong đường dẫn mà bạn vẽ được tài liệu W3C gọi là "đường phụ"
var canvas = document.getElementById("mycanvas");1
ví dụ 1. 1 Bây giờ chúng ta cần thử một bản demo — chúng ta sẽ vẽ một vài đường ngang ngẫu nhiên và sau đó là phác thảo một con mắt. Kết quả sẽ giống như một cái gì đó ở bên trái. Đừng quên xem qua mã và mày mò mã 2 ví dụ 1. 2 Trong ví dụ bên dưới, tôi tạo một đường cong hình khối (có hướng dẫn trực quan), 23 cuộc gọi ở giữa bên phải và một người đàn ông đóng gói với 29 ở phía dưới bên trái. Các điểm kiểm soát (trong đường cong khối) là các góc được tạo bởi ba hướng dẫnvar canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }27 cho 23 là góc tạo bởi hai tiếp tuyến var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }2Kiểu vẽ Cho đến bây giờ, chúng ta đã vẽ những đường nét mỏng đơn giản. Các kiểu vẽ sẽ giúp chúng ta vẽ đẹp hơn rất nhiều Lưu ý rằng bạn không thể áp dụng hai kiểu khác nhau trên cùng một đường dẫn. Ví dụ: nếu bạn muốn vẽ một đường màu đỏ và một đường màu xanh — bạn sẽ phải tạo một đường dẫn mới để vẽ đường màu xanh. Nếu bạn không tạo một đường dẫn mới, thì khi gọi 8 lần thứ 2 sau khi đặt màu kiểu hiển thị của bạn thành màu xanh lam, cả hai đường sẽ có màu xanh lam. Do đó, các kiểu được áp dụng cho tất cả các đường phụ, cho dù chúng đã được vuốt hay chưaMột vài thuộc tính của đối tượng ngữ cảnh 2D 73 được xác định cho mục đích này
ví dụ 1. 3 & 1. 4 Trong ví dụ 1. 3 ở bên trái, bạn có thể thấy các dòng giới hạn dòng tròn & vuông dài hơn giới hạn mặc định như thế nào. (GHI CHÚ. Dòng càng dày, độ dài càng tăng) Trong ví dụ 1. 4(a), bạn có thể thấy cách nối tròn và vát hoạt động. Các đường được tạo giống hệt nhau ở phần trên và dưới. Chỉ có thuộc tính ________ 576 là khác Trong ví dụ 4. 1(b), bạn có thể thấy cách thức hoạt động của phép nối giảm nhẹ và điều gì sẽ xảy ra nếu độ dài giảm dần được thông qua Các thuộc tính kiểu hiển thị bổ sung được xác định
Trong các ví dụ cho đến bây giờ, bạn có thể nhận thấy tôi đã sử dụng 44 trước khi đóng từng đường dẫn. Phương pháp nét vẽ thực hiện một phần bản vẽ đó trong các ví dụ đó
2Đoạn mã trên không đóng tam giác (10,10),(50,50),(10,50) nhưng gọi 48 sẽ lấp đầy nó như mong đợi
GHI CHÚ. 50 và 59 là các thuộc tính có thể được đặt thành bất kỳ chuỗi màu CSS nào để đặt màu tô và màu nétĐộ dốc và mẫuRa khỏi hộp, bối cảnh 2D cung cấp độ dốc tuyến tính và xuyên tâm. Các phương thức 56 và 57 trả về các đối tượng 58, sau đó có thể sửa đổi những gì chúng ta muốn
58 có một phương thức. 07. Độ dốc bắt đầu từ 0 và kết thúc tại 1. Màu tại vị trí của 08 sẽ được đặt bằng phương pháp này. Ví dụ: 09 sẽ làm cho màu ở giữa có màu xanh lục. Màu sắc giữa hai điểm dừng liền kề sẽ được nội suy (hỗn hợp)ví dụ 1. 6 Trong ví dụ bên trái, bạn có thể thấy cách thức hoạt động của gradient tuyến tính và hướng tâm 7Bạn có thể thắc mắc điều gì sẽ xảy ra nếu 22 và 26 được cung cấp cho gradient tuyến tính/hướng tâm không bằng với đường/cung mà chúng ta tạo? . 7 ví dụ 1. 7 4Thao tác & hình ảnh pixel trực tiếp Đối tượng 12 có thể được sử dụng để thao tác các pixel riêng lẻ. Nó có ba thuộc tính
GHI CHÚ. Giá trị RGBA có thể được sử dụng để biểu thị màu — trong đó R, G, B là lượng màu đỏ, lục và lam và A là độ mờ (giá trị alpha). Trong Canvas, các phần tử này có thể có bất kỳ giá trị số nguyên nào trong [0, 255] Bạn có thể lấy đối tượng 12 bằng các phương thức sau trong API Canvas
Các pixel CSS có thể ánh xạ tới một số pixel thiết bị thực khác do chính đối tượng hiển thị
Đối với tất cả các giá trị nguyên của x và y trong đó dirtyX ≤ x < dirtyX+dirtyWidth và dirtyY ≤ y < dirtyY+dirtyHeight, sao chép bốn kênh của pixel có tọa độ (x, y) trong cấu trúc dữ liệu31 sang pixel có tọa độ ( ví dụ 1. 8 Tôi đã lấp đầy toàn bộ canvas 400x400 bằng các màu ngẫu nhiên (hoàn toàn mờ đục) bằng phương pháp 37Lưu ý rằng việc sử dụng 38 là không cần thiết để sử dụng API ImageData — bởi vì bạn không sử dụng API Canvas để tạo thành các hình dạng/đường cong 5Hình ảnh có thể được vẽ trực tiếp lên canvas. 39 có thể được sử dụng theo ba cách khác nhau để làm như vậy. Nó yêu cầu 40 làm nguồn pixelMột40 có thể là một trong những thứ sau — HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. Để sao chép vào canvas, bạn có thể sử dụng
ví dụ 1. 9 GHI CHÚ. Thêm phần này vào HTML của bạn — 0Biến đổiBây giờ chúng ta đang chuyển sang các phần thú vị của API Canvas Canvas sử dụng ma trận chuyển đổi để chuyển đổi tọa độ đầu vào (x, y) thành tọa độ (x, y) được hiển thị. Lưu ý rằng các pixel được vẽ trước khi chuyển đổi không được chuyển đổi - chúng không bị ảnh hưởng. Chỉ những thứ được vẽ sau khi áp dụng phép biến đổi mới bị thay đổi Có ba phương thức chuyển đổi được xây dựng
ví dụ 2. 0 Trong ví dụ 2. 0, chú ý ảnh gốc còn nguyên vẹn như thế nào. Chỉ hình ảnh thứ hai (lớp phủ) được biến đổi bằng ba phương pháp — xoay, chia tỷ lệ, biến đổi Để hoàn nguyên tất cả các biến đổi 2GHI CHÚ
Vùng đánh Tính đến thời điểm viết bài (tháng 3 năm 2019), hỗ trợ cho các khu vực bị ảnh hưởng đang được thử nghiệm trong Chrome và trên Firefox. Trình duyệt di động thậm chí không hỗ trợ nó. Do đó, tôi sẽ giải thích cho bạn "cái gì" có thể được sử dụng để tấn công các khu vực. Các vùng lần truy cập được sử dụng để nắm bắt các sự kiện con trỏ trên khung vẽ và biết "nơi" người dùng đã nhấp vào. Ví dụ: bạn có thể có hai hình chữ nhật A và B — khi người dùng nhấp vào A, bạn muốn thực hiện hành động $A và khi người dùng nhấp vào B, bạn muốn thực hiện hành động $B. Hãy xem qua toàn bộ quá trình Một khu vực bị tấn công có liên quan đến ba điều này
GHI CHÚ. Đường dẫn được canvas tự động cung cấp khi thêm vùng truy cập mới. Chỉ một — id hoặc điều khiển — là cần thiết để tạo thành một vùng đánh Các phương pháp thao tác danh sách vùng trúng của canvas là
3GHI CHÚ. Các vùng lần truy cập không được hỗ trợ — nhưng điều đó không có nghĩa là bạn phải sử dụng chúng để nắm bắt các sự kiện con trỏ. Bạn có thể tạo “danh sách vùng bị tấn công của riêng mình” và biểu thị ranh giới của các vùng (vì bạn không thể lấy đường dẫn hiện tại từ khung vẽ, quá tệ). Trong phương pháp 82, lấy các thuộc tính 83 hiện tại và tìm kiếm trong danh sách vùng bị ảnh hưởng. Dựa trên vùng trúng đích chứa điểm, bạn có thể thực hiện hành động dự địnhStates và phương thức clip() Tiết kiệm trạng thái là một tiện ích được cung cấp bởi đặc tả W3C. Bạn có thể lưu trạng thái hiện tại của canvas và khôi phục sau Bạn cũng có thể xây dựng một hệ thống như vậy (một phần) bằng cách viết mô hình JavaScript của riêng bạn. Nhưng bạn sẽ phải tiết kiệm khá nhiều thứ. ma trận chuyển đổi, danh sách vùng nhấn, thuộc tính kiểu, v.v. Hơn nữa, bạn không thể hoàn nguyên khu vực cắt (chúng ta sẽ chuyển sang phương pháp 84 sau một thời gian) trực tiếpGHI CHÚ. Các phương pháp 85 / 86 không lưu và khôi phục bản vẽ/pixel thực tế. Họ chỉ lưu các thuộc tính khácDo đó, tôi khuyên bạn nên sử dụng nhiều phương pháp 85 & 86 để quay đi quay lại thay vì tự xóa nội dung hoặc tạo cơ chế tiết kiệm trạng thái của riêng bạnĐối tượng 89 có ngăn xếp trạng thái được liên kết. Phương thức 85 sẽ đẩy trạng thái canvas hiện tại lên ngăn xếp đó, trong khi phương thức 86 sẽ bật trạng thái mới nhất từ ngăn xếpKhu vực cắt Vùng cắt là một vùng cụ thể trong đó tất cả các bản vẽ sẽ được thực hiện. Rõ ràng, theo mặc định, vùng cắt là hình chữ nhật là toàn bộ canvas. Nhưng bạn có thể muốn vẽ trong một khu vực cụ thể thay vì toàn bộ. Ví dụ: bạn có thể muốn vẽ nửa dưới của một ngôi sao được hình thành bằng nhiều phương pháp 92Vì vậy, ví dụ: giả sử bạn biết cách vẽ một ngôi sao trên canvas. Nó chạm vào tất cả các mặt của canvas. Nhưng bây giờ bạn chỉ muốn hiển thị nửa dưới của ngôi sao. Trong kịch bản này, bạn sẽ
Để cắt một vùng, bạn phải gọi phương thức 93 thực hiện như sauPhương pháp93 phải tạo một vùng cắt mới bằng cách tính giao điểm của vùng cắt hiện tại và vùng được mô tả bởi đường dẫn, sử dụng quy tắc số quanh co khác không. Các đường phụ mở phải được đóng hoàn toàn khi tính toán vùng cắt mà không ảnh hưởng đến các đường phụ thực tế. Vùng cắt mới thay thế vùng cắt hiện tại. 4Đó là tất cả cho bây giờ. Mình sẽ viết một bài về animation với canvas và cách viết giao diện custom hoàn toàn trên canvas đọc thêm
Shukant Pal là người tạo ra hạt nhân Silcos. Anh ấy là một người ham học hỏi và hiện đang thực hành phát triển ứng dụng web nâng cao. Anh ấy có kinh nghiệm thực tế với React và hệ sinh thái của nó Tất cả các trích dẫn được lấy từ tài liệu W3C cho Canvas 2D Context Này, tôi là Shukant Pal. Tôi đang phát triển rất nhiều ứng dụng web trong thời gian rảnh rỗi. Theo dõi tôi trên mạng xã hội QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nếu bài viết này hữu ích, hãy tweet nó Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu Bạn có thể đặt HTML trong canvas không?HTML là Ngôn ngữ đánh dấu siêu văn bản và là nền tảng của tất cả các trang web. Nó giúp máy tính của chúng tôi giải thích nội dung trên trang web. hình ảnh, bảng, đoạn văn, tiêu đề, v.v. Khi chúng tôi tạo nội dung trong Canvas bằng Trình chỉnh sửa nội dung phong phú (RCE), thì Canvas sẽ chuyển đổi nội dung của chúng tôi thành mã (HTML) .
Canvas HTML5 có còn được sử dụng không?Canvas HTML5 có tiềm năng trở thành một phần chính của web, được hỗ trợ nền tảng và trình duyệt phổ biến bên cạnh hỗ trợ trang web rộng rãi, vì gần 90% trang web đã chuyển sang HTML5
Canvas là HTML hay CSS?Canvas là một vùng hình chữ nhật trên trang HTML . Theo mặc định, canvas không có viền và không có nội dung. |