drawImage()
Canvas drawImage() metodi
Ishlatiladigan rasm:
Misol
Rasmni canvas’ga chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
O‘zingiz sinab ko‘ring »
Tavsif
drawImage() metodi canvas’ga rasm, canvas yoki video chizadi.
drawImage() metodi rasmning qismlarini ham chizishi va/yoki rasm o‘lchamini kattalashtirishi/kichiklashtirishi mumkin.
Sintaksis
Rasmni canvas’ga joylashtiring:
| context.drawImage(img, x, y) |
Rasmni canvas’ga joylashtiring va rasmning kengligi hamda balandligini belgilang:
| context.drawImage(img, x, y, width, height) |
Rasmni qirqing va qirqilgan qismni canvas’ga joylashtiring:
| context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| img | Ishlatiladigan rasm, canvas yoki video elementini belgilaydi | |
| sx | Ixtiyoriy. Qirqish boshlanadigan x koordinata | Sinab ko‘rish » |
| sy | Ixtiyoriy. Qirqish boshlanadigan y koordinata | Sinab ko‘rish » |
| swidth | Ixtiyoriy. Qirqilgan rasmning kengligi | Sinab ko‘rish » |
| sheight | Ixtiyoriy. Qirqilgan rasmning balandligi | Sinab ko‘rish » |
| x | Rasm canvas’ga joylashtiriladigan x koordinata | Sinab ko‘rish » |
| y | Rasm canvas’ga joylashtiriladigan y koordinata | Sinab ko‘rish » |
| width | Ixtiyoriy. Ishlatiladigan rasmning kengligi (rasmni cho‘zish yoki kichiklashtirish) | Sinab ko‘rish » |
| height | Ixtiyoriy. Ishlatiladigan rasmning balandligi (rasmni cho‘zish yoki kichiklashtirish) | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Misol
Rasmni canvas’ga joylashtiring va rasmning kengligi hamda balandligini belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
O‘zingiz sinab ko‘ring »
Misol
Rasmni qirqing va qirqilgan qismni canvas’ga joylashtiring:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
O‘zingiz sinab ko‘ring »
Misol
Ishlatiladigan video (namoyishni boshlash uchun Play tugmasini bosing):
Canvas:
JavaScript (kod har 20 millisekundda videoning joriy kadrini chizadi):
const video = document.getElementById("video1");
const canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
v.addEventListener('play', function() {var i = window.setInterval(function() {ctx.drawImage(v, 5, 5, 260, 125)}, 20);}, false);
video.addEventListener('pause', function() {window.clearInterval(i);}, false);
video.addEventListener('ended', function() {clearInterval(i);}, false);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
drawImage() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!