HTML canvas drawImage () metode

Untuk menggunakan gambar:

The Scream

contoh

Untuk menggambar di atas kanvas:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "berteriak");
img.onload = function () {
ctx.drawImage (img, 10,10);
}

Coba »

Dukungan Browser

Internet Explorer 9, Firefox, Opera, Chrome dan Safari dukungan drawImage () metode.

Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.

Definisi dan Penggunaan

drawImage () metode untuk menggambar gambar, video atau kanvas di kanvas.

bagian-bagian tertentu untuk drawImage () metode juga dapat menarik gambar, dan / atau menambah atau mengurangi ukuran gambar.

sintaks JavaScript

Memposisikan gambar di kanvas:

sintaks JavaScript:	konteks .drawImage (img, x, y);

Memposisikan gambar pada kanvas, dan lebar yang telah ditentukan dan tinggi gambar:

sintaks JavaScript:	konteks .drawImage (img, x, y, lebar, tinggi);

Potong gambar dan melokalisasi bagian luka di kanvas:

sintaks JavaScript:	konteks .drawImage (img, sx, sy, swidth, sheight, x, y, lebar, tinggi);

Nilai parameter

parameter	deskripsi
img	Yang telah ditentukan gambar, kanvas atau video yang ingin Anda gunakan.
sx	Opsional. Mulai memotong x koordinat posisi.
sy	Opsional. Mulai memotong y koordinat.
swidth	Opsional. Ini adalah lebar dari pemotongan gambar.
sheight	Opsional. Sangat memotong gambar.
x	Tempat x koordinat posisi gambar di kanvas.
y	Menempatkan koordinat y dari posisi gambar di kanvas.
lebar	Opsional. Untuk menggunakan lebar gambar (oleh peregangan atau menyusut gambar).
tinggi	Opsional. Ketinggian gambar yang ingin Anda gunakan (dengan peregangan atau menyusut gambar).

contoh yang lebih

contoh

Di kanvas posisi gambar, kemudian tentukan lebar dan tinggi dari gambar:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "berteriak");
img.onload = function () {
ctx.drawImage (img, 10,10,150,180);
}

Coba »

contoh

Potong gambar, dan pada kanvas bagian dicukur diposisikan:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "berteriak");
ctx.drawImage (img, 90,130,50,60,10,10,50,60);

Coba »