طريقة drawImage () القماشية بتنسيق HTML
الصورة المراد استخدامها:
مثال
ارسم الصورة على القماش:
جافا سكريبت:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
Method | |||||
---|---|---|---|---|---|
drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
التعريف والاستخدام
تقوم طريقة drawImage () برسم صورة أو لوحة قماشية أو مقطع فيديو على اللوحة القماشية.
يمكن لطريقة drawImage () أيضًا رسم أجزاء من الصورة و / أو زيادة / تقليل حجم الصورة.
بناء جملة JavaScript
ضع الصورة على اللوحة القماشية:
بناء جملة JavaScript: | السياق .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) |
مزيد من الأمثلة
مثال
ضع الصورة على اللوحة القماشية ، وحدد عرض الصورة وارتفاعها:
جافا سكريبت:
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);
مثال
فيديو لاستخدامه (اضغط تشغيل لبدء العرض التوضيحي):
اللوحة القماشية:
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, 5, 5, 260, 125)}, 20);}, false);
v.addEventListener('pause', function() {window.clearInterval(i);}, false);
v.addEventListener('ended', function() {clearInterval(i);}, false);
❮ كائن قماش