Hướng dẫn dùng drawimage trong PHP

Ví dụ và cách sử dụng phương thức drawImage() để hiển thị ảnh, tranh hoặc video trong canvas.

Nội dung chính Show

Trình duyệt hỗ trợ
Định nghĩa và cách sử dụng
Cú pháp JavaScript

in Thư viện thuộc tính HTML

Ảnh sử dụng:

Vẽ ảnh trên Canvas:

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

Ảnhsửdụng:

Canvas:

<canvas id="myCanvas"width="250"height="300"style="border:1px solid #d3d3d3;">Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5.</canvas>

</body>

</html>

Demo

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
drawImage()	4.0	2.0	9.0	3.1	9.0

Định nghĩa và cách sử dụng

Phương thức drawImage() sử dụng để hiển thị ảnh, tranh hoặc video trong canvas.

Phương thức drawImage() cũng có thể hiển thị một phần của ảnh, và/hoặc tăng/giảm kích cỡ ảnh.

Cú pháp JavaScript

Vị trí của ảnh trên canvas

Cú pháp: context.drawImage(img,x,y);

Vị trí của ảnh trên canvas và chỉ định chiều rộng và chiều cao của ảnh:

Cú pháp: context.drawImage(img,x,y,width,height);

Cắt ảnh và hiển thị phần vừa cắt lên một vị trí trong canvas:

Cú pháp: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Giá trị tham số

Tham số	Miêu tả
img	Thẻ ảnh, tranh hoặc video được sử dụng
sx	Tùy chọn. Tọa độ X điểm bắt đầu cắt
sy	Tùy chọn. Tọa độ Y điểm bắt đầu cắt
swidth	Tùy chọn. Chiều rộng của ảnh được cắt
sheight	Tùy chọn. Chiều cao của ảnh được cắt
x	Tọa độ X để đặt ảnh trên canvas
y	Tọa độ Y để đặt ảnh trên canvas
width	Tùy chọn. Chiều rộng của ảnh (kéo dài hoặc thu nhỏ ảnh)
height	Tùy chọn. Chiều cao của ảnh (kéo dài hoặc thu nhỏ ảnh)

Ví dụ

Vị trí của ảnh trên canvas và chỉ định chiều rộng và chiều cao của ảnh:

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

Ảnhsửdụng:

Canvas:

<canvas id="myCanvas"width="250"height="300"style="border:1px solid #d3d3d3;">Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5.</canvas>

</body>

</html>

Demo

Cắt ảnh và hiển thị phần vừa cắt lên một vị trí trong canvas:

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

Ảnhsửdụng:

Canvas:

<canvas id="myCanvas"width="250"height="300"style="border:1px solid #d3d3d3;">Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5.</canvas>

</body>

</html>

Demo

Video sử dụng (nhấn vào video để bắt đầu):

Trên canvas:

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

Videosửdụng:

</video>

Trên canvas(hiểnthịkhunghình hiệntạicủavideo saumỗi20mili giây):

<canvas id="myCanvas"width="270"height="135"style="border:1px solid #d3d3d3;">Trình duyệtcủa bạnkhônghỗtrợthẻcanvas trong HTML5.</canvas>

</body>

</html>

Demo

Hướng dẫn dùng drawimage trong PHP

Trình duyệt hỗ trợ

Định nghĩa và cách sử dụng

Cú pháp JavaScript

Giá trị tham số

Ví dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội