Canvas rasmlari
HTML Canvas - rasm chizish
drawImage() metodi canvas’ga rasm chizadi.
drawImage() metodidan uchta turli sintaksis bilan foydalanish mumkin:
drawImage(image, dx, dy)drawImage(image, dx, dy, dwidth, dheight)drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
Quyidagi misollarda uchta turli sintaksis tushuntiriladi.
drawImage(image, dx, dy)
drawImage(image, dx, dy) sintaksisi rasmni canvas’da joylashtiradi.
Misol
Rasmni canvas’ning (10, 10) pozitsiyasiga chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10, 10);
});
</script>
O‘zingiz sinab ko‘ring »
drawImage(image, dx, dy, dwidth, dheight)
drawImage(image, dx, dy, dwidth, dheight) sintaksisi rasmni canvas’da joylashtiradi hamda rasmning canvas’dagi kengligi va balandligini belgilaydi.
Misol
Rasmni canvas’ning (10, 10) pozitsiyasiga kengligi va balandligi 80 piksel qilib chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10, 10, 80, 80);
});
</script>
O‘zingiz sinab ko‘ring »
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) sintaksisi manba rasmni canvas’ga joylashtirishdan oldin uni kesish (qirqish) uchun ishlatiladi.
Misol
Bu yerda manba rasmni (90, 130) pozitsiyadan boshlab kengligi 50 va balandligi 60 qilib kesamiz, so‘ngra kesilgan qismni canvas’ning (10, 10) pozitsiyasiga kengligi 150 va balandligi 160 piksel qilib joylashtiramiz (shunda kesilgan manba rasm masshtablanadi/cho‘ziladi ham):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 90, 130, 50, 60, 10, 10, 150, 160);
});
</script>
O‘zingiz sinab ko‘ring »
drawImage() metodining parametrlari quyidagilar:
| Parametr | Tavsif |
|---|---|
| image | Majburiy. Kontekstga chiziladigan rasm |
| sx | Ixtiyoriy. Manba rasm yuqori chap burchagining x koordinatasi (manba rasmni kesish uchun) |
| sy | Ixtiyoriy. Manba rasm yuqori chap burchagining y koordinatasi (manba rasmni kesish uchun) |
| swidth | Ixtiyoriy. Manba rasmdan kesib olinadigan qismning piksellardagi kengligi |
| sheight | Ixtiyoriy. Manba rasmdan kesib olinadigan qismning piksellardagi balandligi |
| dx | Canvas’da manba rasmning yuqori chap burchagi joylashtiriladigan x koordinata |
| dy | Canvas’da manba rasmning yuqori chap burchagi joylashtiriladigan y koordinata |
| dwidth | Ixtiyoriy. Rasmni maqsadli canvas’da chizish kengligi. Bu rasmni masshtablash imkonini beradi |
| dheight | Ixtiyoriy. Rasmni maqsadli canvas’da chizish balandligi. Bu rasmni masshtablash imkonini beradi |
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!