Canvas drawImage() 方法

Panduan Referensi Canvas

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

实例

例子 1

要使用的图片：

tulip

向画布上面绘制图片：

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript:

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

Coba sendiri

提示：页面底部提供更多实例。

语法

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

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

JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

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

参数值

参数 Deskripsi
img Tentukan gambar, kanvas, atau video yang digunakan.
sx Pilihan. Titik x koordinat untuk memulai pemotongan.
sy Pilihan. Titik y koordinat untuk memulai pemotongan.
swidth Pilihan. Lebar gambar yang dipotong.
sheight Pilihan. Tinggi gambar yang dipotong.
x Titik x koordinat untuk menempatkan gambar di atas kanvas.
y Titik y koordinat untuk menempatkan gambar di atas kanvas.
width Pilihan. Lebar gambar yang digunakan.
height Pilihan. Tinggi gambar yang digunakan.

Beberapa contoh lain

Contoh 2

Tentukan lokasi gambar di atas kanvas dan tentukan lebar dan tinggi gambar:

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript:

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

Coba sendiri

Contoh 3

Potong gambar dan tentukan lokasi bagian yang dipotong di atas kanvas:

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

Coba sendiri

Contoh 4

Video yang digunakan (tekan tombol play untuk memulai pertunjukan):

Kanvas:

Peramban Anda tidak mendukung tag HTML5 canvas.

JavaScript (setiap 20 milidetik, kode akan menggambar bingkai saat ini dari video):

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,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Coba sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung sifat ini penuh.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi yang lebih awal tidak mendukung elemen <canvas>.

Panduan Referensi Canvas