HTML5: vẽ đường thẳng với Canvas lineTo
Fri, 12/02/2011 - 16:49 | 
Để vẽ một đường thẳng sử dụng HTML5 Canvas, chúng ta dùng các phương thức moveTo(), lineTo() và stroke()
Đầu tiên trong chúng ta đặt thẻ Canvas vào trong body
Tags: Đội mũ cho đường thẳng với Canvas lineCap
Để gắn góc bo tròn hay vuông hai đầu cho đường thẳng trong HTML5 Canvas, chúng ta sử dụng thuộc tính lineCap. lineCap có 3 giá trị: butt, round, và square. Giá trị mặc định là butt.
Vẽ hình cung với Cavas arc
Để vẽ hình cung với HTML5 Canvas, chúng ta có thể sử dụng phương thức arc().
Vẽ đường cong đơn giản với Canvas quadraticCurveTo
Để vẽ một đường cong Quadratic trong HTML5 Canvas chúng ta có thể sử dụng phương thức quadraticCurveTo(). Đường cong được xác định bởi một điểm điều khiển và một điểm kết thúc.
Vẽ đường cong phức tạp vói Canvas bezierCurveTo
Vẽ vời với các đường cơ bản
Sau khi nắm ba bài vẽ đường thẳng, đường cong và đường cong phức tạp bây giờ chúng ta bắt đàu làm bài tập thực hành kết hợp ba bài này để vẽ những đường mà chung ta muốn.
Vẽ hình vuông - chữ nhật
1 |
|
Cắt một vùng chọn với phương thức clip
Để cắt một vùng được sử dụng trong HTML5 Canvas, chúng ta có thể vẽ vùng đó và dùng phương thức clip(). Hay nói cách khác, dùng phương thức clip để xóa đi những vùng bên ngoài nó.
Cú pháp:
Tô màu Linear Gradient
Để tô màu gradient dạng linear (sọc) với HTML5 Canvas chúng ta có thể dùng phương thức createLinearGradient(). Để chèn hình vào phương thức này chúng ta sử dụng thuộc tính addColorStop.
Cú pháp:
HTML5 Canvas: tô màu Gradient Radial
Để tô màu gradient radial (màu gradient theo hình tròn) trong HTML5 Canvas chúng ta sử dụng phương thức createRadialGradient(). Radial gradients được định nghĩa bởi hai điểm bắt đầu và kết thúc (tương tự Gradient Linear).
Cú pháp:
.jpg)
