روش 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

تصویر را در قاب قرار دهید:

context.drawImage(img,x,y);

جمله‌نویسی 2

تصویر را در قاب قرار دهید و اندازه تصویر را تعیین کنید:

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

جمله‌نویسی 3

تصویر برش شده را برش دهید و بخش برش شده را در قاب قرار دهید:

context.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 میلیمتر، کد می‌تواند فریم فعلی ویدیو را ترسیم کند):

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

نکته:نسخه‌های 8 و قدیمی‌تر اینترنت اکسپلورر از عنصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های HTML5 Canvas