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("scream");
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

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

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("scream");
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("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

Coba »