HTML5 Canvas: lấy một khoảng của hai hình giao nhau
Sun, 12/18/2011 - 08:52 | 
Để cắt một khoảng giữa các hình giao nhau trong HTML5 Canvas chúng ta có thể sử dụng thuộc tính globalCompositeOperation. Thuộc tính này có 11 giá trị: source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, xor, và copy. Giá trị mặc định sẽ là source-over.
Tags: HTML5 Cavnas: translate
Để di chuyển con trỏ tới một điểm (như moveTo) chúng ta có thể dùng phương thúc translate().
HTML5 Canvas: Scale
Để scale trong HTML5 Canvas chúng ta dùng phương thức scale(). Phương thức này được định nghĩa với hai tham số scale x và scale y.
Cú pháp:
HTML5 Canvas: quay (rotate)
Để quay trong HTML5 Canvas, chúng ta dùng phương thức rotate(). Phương thức này được định nghĩa với một góc trong đường tròn.
Cú pháp:
HTML5 Canvas Custom Transform Tutorial
To apply a custom transformation matrix to the HTML5 Canvas, we can use the transform() method. This method requires six values of a 3 x 3 matrix according to the following convention:
HTML5 Canvas Shear Transform Tutorial
To shear the HTML5 canvas, we can use the transform() method with the transformation matrix below. sx defines the horizontal shear and sy defines the vertical shear.
HTML5 Canvas: lật ngược hình (scale)
Để lật ngược hình (mirror transform) trong HTML5 Canvas chúng ta sử dụng scale với giá trị offsetX hoặc offsetY là -1.
HTML5 Canvas Reset Transform Tutorial
To reset the HTML5 Canvas transformation matrix, we can use the setTransform() method to set the transformation matrix to its default state using the following convention:
.png){kind=spacer}
HTML5 Canvas: save và restore
HTML5 Canvas có hai phương thức để lưu và trả về trạng thái trước đó là save() và restore(). Chúng ta cứ hình dung như save() dùng để đánh dấu các vạch, restore() dùng để quay về vạch trước đó một hoặc nhiều lần. Nếu chưa hiểu bạn có thể xem ví dụ minh họa bên dưới để dể hiểu hơn nhé:
HTML5 Canvas: vẽ hình oval
Ứng dụng kết hợp scale(), save() và restore() để vẽ hình oval. Các bạn có thắc mắc tại sao phải dùng store() trong trường hợp này không? Nếu có bạn hãy thử viết và test lại bài này nhé.
.jpg)
