07/09/2018, 15:12

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
0