HTML کینوکریستال drawImage() روش

دستورالعمل‌های 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 Internet Explorer و قدیمی‌تر از تگ <canvas> پشتیبانی نمی‌کنند.

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