طريقة drawImage () القماشية بتنسيق HTML

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

الصرخة

مثال

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

جافا سكريبت:

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
};

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

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

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

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

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

بناء جملة JavaScript

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

JavaScript syntax:	context.drawImage(img,x,y);

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

JavaScript syntax:	context.drawImage(img,x,y,width,height);

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

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

قيمه المعامل

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

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

مثال

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

جافا سكريبت:

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

مثال

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

جافا سكريبت:

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