Giới Thiệu Về Canvas | Học Lập Trình Cùng Hocjavascript
Có thể bạn quan tâm
NỘI DUNG BÀI VIẾT
- Canvas là gì?
- Ví dụ
- Vẽ đường thẳng
- Vẽ đường tròn
- Vẽ chữ
- Hiệu ứng Gradient
- Hiệu ứng Gradient tròn
Được thêm vào trong phiên bản HTML5, Canvas hỗ trợ việc vẽ đồ họa trên giao diện web nhờ sử dụng JavaScript. Ví dụ như bạn có thể thực hiện việc vẽ các hình hay đoạn thẳng hoặc đường gấp khúc tùy ý, tô màu cho hình, chèn ảnh, hoặc thêm ứng dụng chuyển động cho hình hoặc ảnh….
Trong bài viết này chúng ta sẽ tìm hiểu về Canvas thông qua việc code một ví dụ vẽ ảnh sử dụng API này.
Canvas là gì?
Thẻ <canvas> trong HTML được sử dụng để vẽ các hình ảnh trong trang web.
Chẳng hạn, chúng ta có thể sử dụng canvas để vẽ các hình như:
![Giới thiệu về Canvas 2 canvas 2](https://i0.wp.com/hocjavascript.net/wp-content/uploads/2020/10/canvas-2.png?resize=600%2C400&ssl=1)
Chúng ta sử dụng Javascript để vẽ hình trong canvas. Có thể xem cavas như là một tờ giấy trắng, chúng ta viết mã Javascript để vẽ lên tờ giấy trắng đó.
Có các phương thức để vẽ đường kẻ, hình hộp, đường cung, chữ và vẽ hình ảnh.
Ví dụ
Mã HTML để định nghĩa một canvas là như sau:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>Trong đó:
- width và height là các thuộc tính để quy định kích thước của canvas
- id là thuộc tính để chúng ca có thể truy xuất được đối tượng canvas này từ mã JavaScript (thông qua phương thức document.getElementById()).
Vẽ đường thẳng
Chúng ta sử dụng phương thức lineTo() để vẽ một đường thẳng.
Vẽ đường tròn
Chúng ta sử dụng phương thức arc() để vẽ một đường tròn.
Vẽ chữ
Chúng ta sử dụng phương thức fillText() hoặc strokeText() để vẽ chữ.
Hoặc
Hiệu ứng Gradient
Chúng ta sử dụng phương thức createLinearGradient(), addColorStop() để tạo hiệu ứng gradient.
Hiệu ứng Gradient tròn
Chúng ta sử dụng phương thức createRadialGradient() để tạo hiệu ứng gradient tròn.
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Chia sẻ
Bài viết liên quan
Từ khóa » Học Canvas
-
Hướng Dẫn Sử Dụng Canvas
-
Sử Dụng Canva Trên Canvas (dành Cho Giáo Viên) - Trung Tâm Trợ ...
-
Sáng Tạo Và Cộng Tác | Canva Cho Giáo Dục
-
Tài Nguyên Giảng Dạy Trực Tuyến - Giáo Dục Từ Xa | Canva
-
LMS CANVAS – HỆ THỐNG TRƯỜNG HỌC SỐ TỐT NHẤT HIỆN NAY
-
Chức Năng Và Cách Sử Dụng Hệ Thống - Canvas By Instructure
-
[Tự Học HTML] Thế Nào Là Canvas Trong đồ Hoạ Của HTML? - Cafedev
-
Hướng Dẫn Sử Dụng Canvas - Dành Cho Học Sinh - YouTube
-
[PDF] Canvas Tài Liệu Hướng Dẫn Nhanh
-
Canvas LMS- Nền Tảng đào Tạo Trực Tuyến Hàng đầu Hiện Nay
-
Canvas Trong Trình Duyệt - Danh Sách Việc Cần Làm
-
Canvas Trong Một Trình Duyệt - Hộp Thư đến Email
-
Balo đi Học Canvas Unisex Nam Nữ Nhiều Màu Local Brand DAVIES ...
-
[PDF] HƯỚNG DẪN PHỤ HUYNH SỬ DỤNG CANVAS CANVAS GUIDE ...