Tài nguyên Canvas trong HTML
Thẻ HTML5 <canvas> được sử dụng để vẽ đồ hoạ thông qua scripting (thường là JavaScript). Tuy nhiên, riêng phần tử <canvas> không có khả năng vẽ (chỉ là một vùng chứa đồ hoạ) – bạn phải sử dụng một tập lệnh để vẽ đồ họa.
Phương thức getContext () trả ...
Thẻ HTML5 <canvas> được sử dụng để vẽ đồ hoạ thông qua scripting (thường là JavaScript). Tuy nhiên, riêng phần tử <canvas> không có khả năng vẽ (chỉ là một vùng chứa đồ hoạ) – bạn phải sử dụng một tập lệnh để vẽ đồ họa.
Phương thức getContext () trả về một đối tượng cung cấp các phương thức và thuộc tính cho việc vẽ trên canvas.
Tham chiếu này sẽ bao gồm các thuộc tính và phương pháp của đối tượng getContext (“2d”), có thể được sử dụng để vẽ văn bản, dòng, hộp, vòng kết nối và hơn thế nữa – trên canvas.
Trình duyệt hỗ trợ
Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
Internet Explorer 9, Firefox, Opera, Chrome và Safari hỗ trợ <canvas> và các thuộc tính cũng như cách thức của nó.
Lưu ý: Internet Explorer 8 và các phiên bản trước đó không hỗ trợ phần tử <canvas>.
Các thuộc tính color, style và shadow
| Thuộc tính |
Mô tả |
|---|
| fillStyle |
đặt hoặc trả về màu sắc, gradient hoặc hoạ tiết được sử dụng để lấp đầy bản vẽ |
| strokeStyle |
đặt hoặc trả về màu sắc, hoặc hoạ tiết được sử dụng cho nét vẽ |
| shadowColor |
thiết lập hoặc trả về màu sắc để sử dụng cho bóng |
| shadowBlur |
thiết lập hoặc trả về độ mờ cho bóng |
| shadowOffsetX |
thiết lập hoặc trả về khoảng cách ngang của bóng từ hình khuôn |
| shadowOffsetY |
thiết lập hoặc trả về chiều dọc của bóng từ hình khuôn |
| Phương thức |
Mô tả |
|---|
| createLinearGradient() |
tạo một gradient tuyến tính (để sử dụng trên nội dung canvas) |
| createPattern() |
lặp lại một phần tử được chỉ định theo hướng xác định |
| createRadialGradient() |
tạo ra một gradient xuyên tâm / tròn (để sử dụng trên nội dung canvas) |
| addColorStop() |
chỉ định màu sắc và dừng các vị trí trong một đối tượng gradient |
Các định dạng đường kẻ
| Thuộc tính |
Mô tả |
|---|
| lineCap |
thiết lập hoặc trả về kiểu mũ cho 2 đầu dòng kẻ |
| lineJoin |
thiết lập hoặc trả về kiểu của góc được tạo bởi 2 dòng kẻ |
| lineWidth |
thiết lập hoặc trả về độ rộng của đường kẻ hiện tại |
| miterLimit |
thiết lập hoặc trả về độ dài tối đa của mũ hợp bởi 2 đường thẳng |
Hình chữ nhật trong Canvas
| Phương thức |
Mô tả |
|---|
| rect() |
tạo một hình chữ nhật |
| fillRect() |
vẽ một hình chữ nhật đã được tô màu |
| strokeRect() |
vẽ một hình chữ nhật (không đổ màu) |
| clearRect() |
xóa toàn bộ pixels nằm trong hình chữ nhật |
Đường dẫn trong Canvas
| Phương thức |
Mô tả |
|---|
| fill() |
đổ màu lên hình hiện tại |
| stroke() |
hiển thị nét vẽ mà bạn đã định nghĩa |
| beginPath() |
bắt đầu nét vẽ hoặc thiết lập lại nét vẽ hiện tại |
| moveTo() |
di chuyển nét vẽ tới một điểm trên canvas mà không tạo ra đường kẻ |
| closePath() |
tạo nét vẽ từ vị trí hiện tại về điểm xuất phát nét vẽ |
| lineTo() |
thêm một điểm mới và tạo một đường thẳng từ điểm đó tới điểm hiện tại trên canvas (đường thẳng chưa hiển thị trên canvas) |
| clip() |
cắt một khu vực với bất kỳ hình dạng và kích thước nào từ canvas gốc |
| quadraticCurveTo() |
thêm một điểm vào nét vẽ hiện tại bằng cách sử dụng điểm kiểm soát trong đường cong Bézier bậc hai |
| bezierCurveTo() |
thêm một điểm vào nét vẽ hiện tại bằng cách sử dụng điểm kiểm soát trong đường cong Bézier bậc 3 |
| arc() |
tạo một đường tròn/đường cong (sử dụng để tạo đường tròn hoặc một phần của đường tròn) |
| arcTo() |
tạo một vòng cung / đường cong giữa 2 tiếp tuyến trên the canvas |
| isPointInPath() |
trả về giá trị true nếu điểm đó nằm trong hình hiện tại, ngược lại sẽ trả về false |
Chuyển đổi trong Canvas
| Phương thức |
Mô tả |
|---|
| scale() |
phóng to hay thu nhỏ hình |
| rotate() |
xoay hình trong canvas |
| translate() |
dịch chuyển tọa độ (0,0) sang một vị trí mới trong canvas |
| transform() |
thay thế ma trận biến đổi hiện tại bằng một ma trận mới |
| setTransform() |
thiết lập lại ma trận biến đổi hiện tại và sau đó chạy transform() với tham số mới |
Văn bản trong Canvas
| Thuộc tính |
Mô tả |
|---|
| font |
thiết lập hoặc trả về các thuộc tính cho chữ nội dung trong canvas |
| textAlign |
thiết lập hoặc trả về vị trí căn lề hiện tại của nội dung so với điểm mốc |
| textBaseline |
thiết lập hoặc trả về đường cơ sở được dùng để hiển thị chữ |
| Cách thức |
Mô tả |
|---|
| fillText() |
vẽ chữ đã được đổ màu trong canvas |
| strokeText() |
viết chữ (sử dụng viền) trong canvas |
| measureText() |
trả về một đối tượng chứa độ dài của chữ với đơn vị là pixel |
Vẽ hình trong Canvas
| Cách thức |
Mô tả |
|---|
| drawImage() |
hiển thị ảnh, tranh hoặc video trong canvas |
Thao tác Pixel trong Canvas
| Thuộc tính |
Mô tả |
|---|
| awidth |
trả về chiều rộng của một đối tượng ImageData |
| height |
trả về chiều cao của một đối tượng ImageData |
| data |
trả về một đối tượng có chứa dữ liệu hình ảnh của một đối tượng ImageData được chỉ định |
| Phương thức |
Mô tả |
|---|
| createImageData() |
tạo một đối tượng ImageData rỗng |
| getImageData() |
trả về một đối tượng ImageData đã được sao chép dữ liệu về từng pixel trong hình chữ nhật trên canvas |
| putImageData() |
đưa tất cả dữ liệu ảnh (từ một đối tượng ImageData) hiển thị trên canvas |
Hợp nhất trong Canvas
| Thuộc tính |
Mô tả |
|---|
| globalAlpha |
thiết lập hoặc trả về độ mờ hiện tại của hình vẽ |
| globalCompositeOperation |
thiết lập hoặc trả về cách ảnh nguồn được vẽ trên một ảnh đích |
Phương thức khác trong Canvas
| Phương thức |
Mô tả |
|---|
| save() |
lưu trạng thái của ngữ cảnh hiện tại |
| restore() |
trả về trạng thái đường dẫn và các thuộc tính đã lưu trước đó |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
