طريقة drawImage() لـ Canvas

دليل مرجعي لـ Canvas

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

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

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

مثال

مثال 1

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

زنبق

رسم الصورة على اللوحة:

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

JavaScript:

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 canvas.

JavaScript:

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

جربها بنفسك

مثال 3

قص الصورة، وحدد موقع الجزء المقطوع على اللوحة.

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

JavaScript:

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 canvas.

JavaScript (كل 20 ميليمتر، يُرسم الكود إطار الفيديو الحالي كل 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);

جربها بنفسك

دعم المتصفحات

أرقام الجدول تشير إلى إصدار أولي يدعم هذا الخصائص من المتصفح.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ملاحظة:Internet Explorer 8 وأقدم إصداراته لا تدعم عنصر <canvas>.

دليل مرجعي لـ Canvas