Code24h.com

Blog

19/09/2018, 15:00

drawImage() trong Canvas

Ả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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < 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>

<p>Canvas:</p>

<canvas id="myCanvas" awidth="250" height="300" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

</script>

</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,awidth,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,sawidth,sheight,x,y,awidth,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
sawidth	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
awidth	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>

<p>Canvas:</p>

<canvas id="myCanvas" awidth="250" height="300" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10, 150, 180);

</script>

</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>

<p>Canvas:</p>

<canvas id="myCanvas" awidth="250" height="300" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

document.getElementById("scream").onload = function() {

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);

};

</script>

</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>

<p>Video sử dụng:</p>

</video>

<p>Trên canvas (hiển thị khung hình hiện tại của video sau mỗi 20 mili giây):</p>

<canvas id="myCanvas" awidth="270" height="135" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var v = document.getElementById("video1");

var c = document.getElementById("myCanvas");

ctx = c.getContext("2d");

v.addEventListener("play", function() {var i = window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);}, false);

v.addEventListener("pause", function() {window.clearInterval(i);}, false);

v.addEventListener("ended", function() {clearInterval(i);}, false);

</script>

</body>

</html>

Demo

Bình luận về bài viết này

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

drawImage() trong Canvas

Ả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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < html ...

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ụ

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI