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)
Đâ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ất
Ban đầ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ệt
Cá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 -
Canvas trong HTML là một khu vực có thể vẽ đồ họa bằng Javascript
Thẻ tạo vùng chứa đồ họa
JavaScript sau đó vẽ đường dẫn, hình dạng, văn bản, hình ảnh, v.v. bên trong container này
Một phần tử có mã vẽ JavaScript
Hãy thử trực tiếpThẻ tạo vùng chứa đồ họa có chiều rộng và chiều cao nhất định
JavaScript vẽ các hình dạng, chẳng hạn như đường thẳng, hình tròn, văn bản và hình ảnh bên trong vùng chứa
Canvas hỗ trợ các chức năng vẽ nâng cao bao gồm hình dạng, cắt, biến đổi, v.v.
Vẽ một đường bằng Canvas
Sử dụng các hàm moveto, _______24_______ và stroke để vẽ một đường chéo trên canvas
Hãy thử trực tiếpVẽ hình tròn bằng Canvas
Sử dụng các hàm 0, _______5_______1 và stroke để vẽ một vòng tròn trên canvas
Hãy thử trực tiếpSử dụng hàm 3 để vẽ văn bản trên canvas
Hãy thử trực tiếpVẽ nét chữ bằng Canvas
Sử dụng hàm 4 để vẽ nét chữ (i. e. văn bản dựa trên véc-tơ) trên canvas
Hãy thử trực tiếpVẽ màu gradient tuyến tính bằng Canvas
Ví dụ này tô hình chữ nhật bằng dải màu tuyến tính
Trước tiên, JavaScript tạo một dải màu tuyến tính với
5 và
6
Sau đó, gradient này được sử dụng để tô và vẽ hình chữ nhật bằng hàm
7
Vẽ màu gradient hình tròn bằng Canvas
Ví dụ này tô hình chữ nhật bằng dải màu hình tròn
Trước tiên, JavaScript tạo một dải màu hình tròn với
8 và
6
Sau đó, gradient này được sử dụng để tô và vẽ hình chữ nhật bằng hàm
7
Sử dụng canvas để tạo hoạt ảnh nhanh
Canvas rất nhanh, cho phép bạn tạo các hoạt ảnh thú vị
Dưới đây là hình ảnh động của hệ mặt trời được tạo bằng , CSS và JavaScript
Hoạt hình lịch sự của www. mozilla. tổ chức
Đây là thời điểm bắt đầu hỗ trợ cho từng trình duyệt
Để biết chi tiết về , hãy xem Tham khảo thẻ canvas HTML của chúng tôi
- Nhà
- Bài tập HTML CSS Trang chủ
- ▼Bài tập HTML cơ bản
- Nhà
- Nhận xét
- siêu liên kết
- viết tắt
- Địa chỉ nhà
- Diện tích
- Bài báo
- Qua một bên
- âm thanh
- Chữ in đậm
- Cơ sở
- BDI
- BDO
- trích dẫn khối
- Cơ thể người
- Nghỉ
- Cái nút
- Tranh sơn dầu
- Đầu đề
- trích dẫn
- Cột
- Mã số
- Danh sách dữ liệu
- Xác định Mô tả
- Del
- Thông tin chi tiết
- Sự định nghĩa
- hộp thoại
- Phân công
- Danh sách mô tả
- thuật ngữ định nghĩa
- nhấn mạnh
- Nhúng
- Bộ trường
- chú thích
- Nhân vật
- chân trang
- Hình thức
- Phần mở đầu
- Đầu
- tiêu đề
- thẻ nhân sự
- Thẻ HTML
- tôi gắn thẻ
- Thẻ khung nội tuyến
- Thẻ hình ảnh
- Thẻ đầu vào
- Chèn thẻ
- Thẻ kbd
- Thẻ khóa
- Thẻ nhãn
- Thẻ huyền thoại
- Thẻ LI
- Thẻ liên kết
- Thẻ chính
- Thẻ bản đồ
- đánh dấu thẻ
- Thẻ thực đơn
- Thẻ meta
- Thẻ đồng hồ
- Thẻ điều hướng
- Thẻ ghi chú
- Thẻ đối tượng
- Danh sách đặt hàng Thẻ
- Thẻ nhóm chọn
- Thẻ tùy chọn
- Thẻ đầu ra
- Thẻ đoạn văn
- thẻ thông số
- Văn bản được định dạng sẵn
- Thẻ tiến độ
- thẻ báo giá
- Gạch ngang thẻ
- Thẻ tập lệnh
- Chọn thẻ
- thẻ nhỏ
- Thẻ nguồn
- Thẻ kéo dài
- thẻ mạnh
- Thẻ kiểu
- Thẻ đăng ký
- Thẻ tóm tắt
- Thẻ chỉ số trên
- Thẻ bảng
- Thẻ thân bảng
- Thẻ dữ liệu bảng
- Thẻ vùng văn bản
- Thẻ chân bảng
- Bảng đầu cột Tag
- Thẻ tiêu đề bảng
- Thẻ tiêu đề
- Thẻ hàng của bảng
- Thẻ gạch dưới
- Danh sách không có thứ tự Tag
- Thẻ biến
- Thẻ video
- Thẻ ngắt từ
- Nhiều hơn để đến
[Một trình chỉnh sửa có sẵn ở cuối trang để viết và thực thi các tập lệnh. ] 17. Làm thế nào để vẽ đồ họa, một cách nhanh chóng, thông qua kịch bản? Mã HTML Hãy thử nó trong trình chỉnh sửa sau hoặc xem giải pháp a. Làm cách nào để chỉ định chiều cao của canvas? b. Làm cách nào để chỉ định chiều rộng của canvas? Xem trình chỉnh sửa chung Pen html css của w3resource (@w3resource) trên CodePen Trước. Làm cách nào để xác định nút có thể nhấp?
Kế tiếp. Làm cách nào để xác định chú thích bảng?
Mức độ khó của bài tập này là gì?
Dễ dàng trung bình khóKiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.
HTML-CSS. Lời khuyên trong ngày
Làm thế nào để nộp. sử dụng quan trọng. css()?
Hầu hết các câu trả lời này hiện đã lỗi thời, hỗ trợ IE7 không phải là vấn đề
Cách tốt nhất để làm điều này hỗ trợ IE11+ và tất cả các trình duyệt hiện đại là
const $elem = $("#elem"); $elem[0].style.setProperty('width', '100px', 'important');- Xu hướng hàng tuần
- Bài tập lập trình Java cơ bản
- Truy vấn con SQL
- Bài tập cơ sở dữ liệu Adventureworks
- Bài tập cơ bản C# Sharp
- SQL COUNT() với sự khác biệt
- Bài tập chuỗi JavaScript
- Xác thực biểu mẫu HTML JavaScript
- Bài tập bộ sưu tập Java
- hàm SQL COUNT()
- Tham gia bên trong SQL
- Hàm JavaScript Bài tập
- Hướng dẫn Python
- Bài tập mảng Python
- Tham gia chéo SQL
- Bài tập về mảng Sharp trong C#