صورة لاستخدام:
مثال
رسم الصورة على قماش:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
و drawImage() يرسم طريقة صورة، قماش، أو الفيديو على قماش.
و drawImage() الطريقة يمكن أيضا استخلاص أجزاء من الصورة، و / أو زيادة / تقليل حجم الصورة.
جافا سكريبت بناء الجملة
ضع الصورة على قماش:
| جافا سكريبت بناء الجملة: | 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 | اختياري. عرض صورة لاستخدام (stretch or reduce the image) | العبها " |
| height | اختياري. ارتفاع الصورة لاستخدام (stretch or reduce the image) | العبها " |
مزيد من الأمثلة
مثال
ضع الصورة على قماش، وتحديد عرض وارتفاع الصورة:
جافا سكريبت:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); انها محاولة لنفسك » مثال
مقطع الصورة ووضع جزء قص على القماش:
جافا سكريبت:
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); انها محاولة لنفسك » مثال
الفيديو لاستخدام (press Play to start the demonstration) :
قماش:
جافا سكريبت (رمز يرسم الإطار الحالي للفيديو كل ميلي ثانية واحدة 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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); انها محاولة لنفسك » <كائن قماش