روش drawImage() کانواس

کانواس 参考 دستور زبان

تعریف و استفاده

drawImage() این روش تصویر، کانواس یا ویدیو را روی کانواس نقاشی می‌کند.

drawImage() این روش‌ها می‌توانند بخش‌های خاص تصویر را بکشند و همچنین می‌توانند اندازه تصویر را افزایش یا کاهش دهند.

مثال

مثال 1

تصویر مورد نظر:

تولپ

تصویر را روی کانواس بکشید:

آپ کا براوزر HTML5 کینووس تگ کا پشتیبانی نہیں کرتا.

جسٹاٹسک:

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

علمی طور پر کوشاں کریں

توضیح:مثال‌های بیشتری در پایین صفحه موجود است.

قواعد

زبان برنامه‌نویسی جاوااسکریپت 1

تصویر را روی کانواس قرار دهید:

کонтکس.drawImage(img,x,y);

زبان برنامه‌نویسی جاوااسکریپت 2

تصویر را روی کانواس قرار دهید و عرض و ارتفاع آن را مشخص کنید:

کонтکس.drawImage(img,x,y,width,height);

زبان برنامه‌نویسی جاوااسکریپت 3

تصویر کوچک نمایی بگیرید و بخش مورد نظر را روی کانواس قرار دهید:

کонтکس.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

پارامتر کا مظور

پارامتر وصف
img استفاده کی جانے والی تصویر، کینووس یا ویدیو.
sx اختیاری۔کیپ کئے جانے والی ایکسرس (x) پوزیشن.
sy اختیاری۔کیپ کئے جانے والی ایکسرس (y) پوزیشن.
swidth اختیاری۔کیپ کئے جانے والی تصویر کی چوڑائی.
sheight اختیاری۔کیپ کئے جانے والی تصویر کی اوپائی.
x کینووس پر تصویر کو رکھنے والا ایکسرس (x) پوزیشن.
y کینووس پر تصویر کو رکھنے والا ایکسرس (y) پوزیشن.
width اختیاری۔استفاده کی جانے والی تصویر کی چوڑائی.
height اختیاری۔استفاده کی جانے والی تصویر کی اوپائی.

بیشتر مثال

مثال 2

کینووس پر تصویر کو نکریجئے، اور تصویر کی چوڑائی اور اوپائی کا تعین کریجئے:

آپ کا براوزر HTML5 کینووس تگ کا پشتیبانی نہیں کرتا.

جسٹاٹسک:

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

علمی طور پر کوشاں کریں

مثال 3

تصویر کو کیپ کریں اور کینووس پر کیپ کئے جانے والے حصے کو نکریجئے:

آپ کا براوزر HTML5 کینووس تگ کا پشتیبانی نہیں کرتا.

جسٹاٹسک:

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

علمی طور پر کوشاں کریں

مثال 4

استفاده کی جانے والی ویدیو (نمایانداری شروع کرنے کیلئے پلائ کا دکھائی دیجئے):

کینووس:

آپ کا براوزر HTML5 کینووس تگ کا پشتیبانی نہیں کرتا.

جسٹاٹسک (هر 20 میل سیکنڈ، کد کسی بجائے ویدیو کا موجودہ فریم نقاشی کرتا ہے):

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

علمی طور پر کوشاں کریں

براہر سپورٹ

جداول میں دکھائی گئی تعداد وضاحت کرتی ہیں کہ کس براہر کا پارٹی کا پرائمری سپورٹ کیا گیا تھا۔

کروم ایج فائر فاکس سافری آپرا
کروم ایج فائر فاکس سافری آپرا
4.0 9.0 3.6 4.0 10.1

نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پہلے کی نسلیں <کانواس> علامت کو نہیں سپورٹ کرتی ہیں。

کانواس 参考 دستور زبان