Canvas drawImage() روش

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

تعریف و استفاده

drawImage() روش در کanvas تصویر، کanvas یا ویدیو را می‌کشد.

drawImage() روش‌ها می‌توانند بخش‌های خاصی از تصویر را بکشند، و همچنین/یا اندازه تصویر را افزایش یا کاهش دهند.

مثال

مثال 1

تصویری که باید استفاده شود:

تولایپ

تصویر را بر روی کanvas بکشید:

این مرورگر پشتیبانی از تگ کانواس HTML5 را ندارد.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

آزمایش کنید

توجه:مثال‌های بیشتری در پایین صفحه در دسترس است.

قوانین

زبان برنامه‌نویسی 1

تصویر را در کanvas قرار دهید:

محيط.drawImage(img,x,y);

زبان برنامه‌نویسی جاوااسکریپت 2

تصویر را در کanvas قرار دهید و عرض و ارتفاع آن را مشخص کنید:

محيط.drawImage(img,x,y,width,height);

زبان برنامه‌نویسی جاوااسکریپت 3

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

محيط.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 را ندارد.

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 را ندارد.

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 را ندارد.

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> پشتیبانی نمی‌کنند.

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