Tue, 12/13/2011 - 13:12 | 
1 2 3 |
Canvas 2d
Chèn hình với drawImage
Để chèn hình vào HTML5 Canvas chúng ta dùng phương thức drawImage.
To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point is relative to the top left corner of the image.
Cú pháp:
giancon's blog | 
Login or register to post comments | 
Tags: Canvas 2d, drawImage, HTML5, HTML5 Canvas tutorial HTML5 Canvas Pattern
Thay vì tô màu thuần, gradient, chúng ta có thể đổ hình background cho context bởi phương thức createPattern() để thiết lập dạng nền cho thuộc tính fillStyle.
Cú pháp:
giancon's blog | Login or register to post comments | Tags: Canvas 2d, createPattern, HTML5, HTML5 Canvas tutorial 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:
giancon's blog | Login or register to post comments | Tags: canvas, Canvas 2d, createRadialGradient, fillStyle, HTML5, HTML5 Canvas tutorial 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:
giancon's blog | Login or register to post comments | Tags: canvas, Canvas 2d, createLinearGradient, fillStyle, HTML5, HTML5 Canvas tutorial 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:
giancon's blog | Login or register to post comments | Tags: canvas, Canvas 2d, clip, HTML5, HTML5 Canvas tutorial 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ẽ đường cong phức tạp vói Canvas bezierCurveTo
Để dể hiểu bài này, các bạn nên đọc qua bài trước - đường cong Quadratic. Tương tự đường cong Quadratic, nhưng đường cong Bezier được xác định bởi hai điểm điều khiển (thay vì Quadratic chỉ một) và một điểm kết thúc. Đường cong Bezier dùng đẽ vẽ độ cong phức tạp hơn. Để vẽ đường cong Bezier chúng ta dùng phương thức bezierCurveTo().
.jpg)
