Metode drawImage() kanvas HTML

Gambar yang akan digunakan:

Jeritan

Contoh

Gambarkan gambar ke kanvas:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

Method
drawImage()	4.0	9.0	3.6	4.0	10.1

Definisi dan Penggunaan

Metode drawImage() menggambar gambar, kanvas, atau video ke kanvas.

Metode drawImage() juga dapat menggambar bagian dari suatu gambar, dan/atau menambah/mengurangi ukuran gambar.

Sintaks JavaScript

Posisikan gambar di kanvas:

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

Posisikan gambar di kanvas, dan tentukan lebar dan tinggi gambar:

JavaScript syntax:	context.drawImage(img, x, y, width, height);

Klip gambar dan posisikan bagian yang terpotong di kanvas:

JavaScript syntax:	context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

Nilai Parameter

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

Lebih Banyak Contoh

Contoh

Posisikan gambar di kanvas, dan tentukan lebar dan tinggi gambar:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);

Contoh

Klip gambar dan posisikan bagian yang terpotong di kanvas:

JavaScript:

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);