أحدث البرامج التعليمية وتطوير الشبكة
 

HTML canvas drawImage() Method

<HTML قماش المرجعي

صورة لاستخدام:

الصرخة

مثال

رسم الصورة على قماش:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};
انها محاولة لنفسك »

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة مستعرض يعتمد الأسلوب بشكل كامل.

طريقة
drawImage() نعم فعلا تسعة نعم فعلا نعم فعلا نعم فعلا

تعريف واستخدام

و drawImage() يرسم طريقة صورة، قماش، أو الفيديو على قماش.

و drawImage() الطريقة يمكن أيضا استخلاص أجزاء من الصورة، و / أو زيادة / تقليل حجم الصورة.

ملاحظة ملاحظة: لا يمكن استدعاء drawImage() طريقة قبل أن تحميل الصورة. إلى التأكد من أنه تم تحميل الصورة، يمكنك الاتصال drawImage() from window.onload() أو من document.getElementById(" imageID ").onload .

جافا سكريبت بناء الجملة

ضع الصورة على قماش:

جافا سكريبت بناء الجملة: context.drawImage(img,x,y);

ضع الصورة على قماش، وتحديد عرض وارتفاع الصورة:

جافا سكريبت بناء الجملة: context.drawImage(img,x,y,width,height);

مقطع صورة ووضع جزء قص على القماش:

جافا سكريبت بناء الجملة: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

قيم معلمة

معامل وصف العبها
img تحديد صورة، قماش، أو عنصر الفيديو لاستخدام
sx اختياري. س تنسيق من أين تبدأ لقطة العبها "
sy اختياري. ذ تنسيق من أين تبدأ لقطة العبها "
swidth اختياري. عرض الصورة قص العبها "
sheight اختياري. ذروة صورة قص العبها "
x س تنسق مكان وضع الصورة على قماش العبها "
y ذ تنسيق مكان وضع الصورة على قماش العبها "
width اختياري. عرض صورة لاستخدام (التمدد أو تقلل من صورة) العبها "
height اختياري. ذروة الصورة لاستخدام (التمدد أو تقلل من صورة) العبها "

المزيد من الأمثلة

مثال

ضع الصورة على قماش، وتحديد عرض وارتفاع الصورة:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10,150,180);
};
انها محاولة لنفسك »

مثال

مقطع صورة ووضع جزء قص على القماش:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت:

window.onload = function() {
    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);
};
انها محاولة لنفسك »

مثال

الفيديو لاستخدام (اضغط بلاي لبدء المظاهرة):

قماش:

متصفحك لا يدعم قماش العلامة HTML5.

جافا سكريبت (رمز يرسم الإطار الحالي للفيديو كل جزء من الثانية 20):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;

v.addEventListener('play',function() {i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
انها محاولة لنفسك »

<HTML قماش المرجعي