طريقة drawImage() لرسام HTML

دليل مرجعي HTML5 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);

قيمة الم parameter

الم 参数 الوصف
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 ميللي ثانية، يتم رسم إطار الفيديو الحالي):

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

دليل مرجعي HTML5 Canvas