Tổng quan
Trong lập trình web có vô số cách để có thể tạo ra hiệu ứng animation cho trang web.
Nhưng vượt trội trong số đó chính là Canvas, một bộ công cụ tuyệt vời trong việc thiết kế, vẻ và tạo animation cho website của bạn.
Không chỉ đơn giản rằng canvas giúp chúng ta dể dàng tạo animation, trên hết nó có thể tạo hình và vẻ ra bât cứ thứ gì chúng ta muốn, những thứ mà CSS không thể làm được, tất cả chỉ giới hạn ở ý tưởng của bạn thôi.
Cách tạo ra một hiệu ứng canvas
Để có thể tạo ra canvas, ở HTML chúng ta cần khai báo một thẻ <canvas>.
Sau đó tiến hành qua javascript để vẻ nó.
Nếu ví canvas là một tờ giấy có thể vẻ tùy ý vậy ta cần có một cây bút:
Var pen = canvas.getContext('2d').
Để làm việc với canvas ta cần hiểu về tọa độ Oxy trong toán hình học và sử dụng nó để tính các điểm vẻ.
Có đôi chút khác biệt với toán hình có oxy theo chiều hướng lên trên thì tọa độ oxy trong canvas lại hướng ngược xuống dưới.
Ngoài ra trong canvas không thể có một tọa độ có số âm. vì tọa độ của một canvas luôn bắt đầu từ (0,0).
Vậy nếu một điểm có tọa độ nhỏ hơn không đồng nghĩa với việc nó không còn nằm trong mặt phẳng canvas nữa. Vậy nó sẽ không thể xuất hiện.
Tiến hành vẻ một điểm với canvas
Đầu tiên ta cần tạo ra một cây bút:
Var pen = canvas.getContext('2d').
Khai báo beginPath() để tiến hành vẻ: pen.beginPath().
Vẻ một hình tròn với ARC: pen.arc(this.x,this.y,this.r,0,Math.PI*2).
- Với this.x là tọa độ điểm theo trục x.
- This.y là tọa độ điểm theo trục y.
- this.r là bán kính hình tròn.
- 0 là vị trí bắt đầu vẻ.
- Và Math.PI là vị trí vẻ cuối cùng.
Cách tính vị trí bắt đầu vẻ và điểm vẻ cuối cùng
ClearRect trong canvas
ClearRect trong canvas chính là một cây bút tẩy.
Nó sẽ bao gồm bốn tham số tương ứng với tọa độ các điểm mà người dùng muốn xóa.
Cú pháp: clearRect(x1,y1,x2,y2).
Với:
- X1 là tọa độ điểm đầu theo trục x.
- Y1 là tọa độ điểm đầu theo trục y.
- X2 là tọa độ điểm cuối muốn xóa theo trục x.
- Y2 là tọa độ điểm cuối muốn xóa theo trục y.
Video hướng dẩn tạo animation canvas chi tiết
Minh họa sản phẩm sau khi làm song video