Canvas Image drawing

‎ترسيم تصوير دربوم ـCanvas Image Drawing

‎دراين صفحه درارتباط با ترسيم تصوير، اديو و بوم بر روي عنصر‎<canva>‎ مطالبي ‎ارائه ميگردد .متدها و ويژگي هاي مرتبط براي ترسيم هركدام دربخش داخلي صفحه ،تشريح ميشوند كه ‎لينك هر كدام درجدول زير آمده است.

‎متد ها و ويژگي تصويري روي عنصر بوم مطابق جدول زيراست.

‎متدCavvas drawImage()‎

‎متد‎drawImage()‎‎ يك تصوير، ويدئو ويا بوم را در يك عنصر ‎<canvas>‎ ‎ترسيم ميكند .همچنين متد فوق ميتواند قسمتي ازتصوير را هم ترسيم كند، يا اندازه تصوير را ‎افزايش ويا كاهش دهد.

‎مثال ـ ترسيم يك تصوير روي بوم .تصوير مورد استفاده را پس ازاجرا مشاهده ميكنيد .با كليك در tryit‎تصوير به بوم منتقل ميشود .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

‎فرمت استفاده ـSyntax

‎اين متد در دو فرمت زير بكار گرفته ميشود.

context.drawIImage(img,x,y)
context.drawIImage(img,sx,sy,swidth,sheight)

‎دومين مورد فوق ،قسمتي از تصوير‎(Clip)‎ در بوم ترسيم ميشود .

‎مقادير پارامتر ـParameter Values

‎مثال ـ تصوير با عرض وارتفاع مشخص روي بوم قرار ميگيرد .با اجرا تصوير مورد استفاده را مشاهده ‎ميكنيد .با كليك روي دكمهtryit تصوير با تغيير ابعاد روي بوم ترسيم ميشود .

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);

‎مثال ـ تصوير رابريده و روي بوم قرار ميدهد . اولين تصوير ، تصوير مورد استفاده وClip آنرا ‎دربوم مشاهده كنيد.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);

‎مثال ـ قرار دادن ويدئو در بوم

const video = document.getElementById("video1");
const canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
v.addEventListener('play', function() {var i = window.setInterval(function() {ctx.drawImage(v, 5, 5, 260, 125)}, 20);}, false);
video.addEventListener('pause', function() {window.clearInterval(i);}, false);
video.addEventListener('ended', function() {clearInterval(i);}, false);

‎متدCanvas createImageData()‎

‎متد‎createImageData()‎‎ يك شئ خالي جديدImageData ايجاد ميكند .مقادير ‎پيكسل شئ جديد مشكي شفاف است‎RGBA(0,0,0,0):‎

‎مثال ـ ايجاد يك شئImageData با ابعاد ‎100*100‎ پيكسل با رنك قرمز براي هر پيكسل

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(100, 100);

for (let i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 10, 10);

‎براي هرپيكسل شئImageData چهار آيتم اطلاعاتي وجود دارد .آنها مقاديرRGBA هستند :

• R‎ـ عددرنگ قرمز‎(0-‎255)‎
• G‎ـ عددرنگ سبز‎(0-‎255)‎
• B‎ـ عددرنگ آبي‎(0-‎255)‎
• A‎ـ عدد شفافيت ‎(0-‎255)‎
  ‎-‎ 0‎شفاف و ‎-‎255‎ كاملا قابل مشاهده

‎اطلاعات مربوط به‎color/alpha‎ درآرايه اي بطول ‎4*width*height‎ ‎نگهداري ميشود، كهheight,width عرض وارتفاع شئ ImageData ميباشد .

‎آرايه فوق حاوي اطلاعات‎color/alpha‎ بوده كه در ويژگي data شئ ImageData ‎ذخيره ميشود.

‎مثال ـ تنظيم رنگ اولين پيكسل شئImageData به قرمز

imgData = ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

‎مثال ـ تنظيم رنگ دومين پيكسل شئImageData به سبز

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

‎فرمت استفاده ـSyntax

‎دو نسخه از‎createImageData()‎ براي ايجاد شئ داده تصويري وجود دارد :

‎ 1‎ـ شئnew ImageData باابعاد مشخص ايجاد ميكند .

context.createImageData(width, height)

‎ـ شئnew ImageData را مشابه با شئ ديگر ايجاد مي نمايد .ابعاد شئ مانند هم بوده ولي كپي ‎آن نيست.

context.createImageData(imageData)

‎مقادير پارامتر ـParameter Values

‎مقدار برگشتي اين دومتد يك شئimageData است .

‎متدCanvas getImageData()‎

‎متد‎getImageData()‎‎ شئ جديدي ازنوع imageData برگشت ميدهد، كه داده هاي ‎مستطيل مشخص شده درآن كپي مي شود.

‎براي هرپيكسل شئImageData چهار آيتم اطلاعاتي وجود دارد .آنها مقاديرRGBA هستند :

• R‎ـ عددرنگ قرمز‎(0-‎255)‎
• G‎ـ عددرنگ سبز‎(0-‎255)‎
• B‎ـ عددرنگ آبي‎(0-‎255)‎
• A‎ـ عدد شفافيت ‎(0-‎255)‎
  ‎-‎ 0‎شفاف و ‎-‎255‎ كاملا قابل مشاهده

‎اطلاعات مربوط به‎color/alpha‎ درآرايه اي بطول ‎4*width*height‎ ‎نگهداري ميشود، كهheight,width عرض وارتفاع شئ ImageData ميباشد .

‎مثال ـ داده هاي پيكسلي يك مستطيل روي بوم درشئ كپي ميشود، و سپس اين داده ها تصويري را ‎دوباره روي بوم در محلي ديگرقرار ميدهد.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
  const imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

--(go to editor for change code and run)

‎مثال ـ كد دريافت اطلاعات‎color/alpha‎ پيكسل j ام بصورت زير بدست مي آيد .

red=imgData.Data(j);
green=imgData.Data(j+1);
blue=imgData.Data(j+2);

‎ميتوان ازطريق ايجاد حلقه اطلاعات رنگ پيكسل هارا تغيير داد.

‎فرمت استفاده ـSyntax

context.getImageData(x,y,width,height)

‎مقادير پارامتر ـParameter Values

‎برگشتي متد يكد شئ ازنوعImageData است .

‎مثال ـ ايجاد تصويري جديد ازمعكوس نمودن رنگ هر پيكسل تصوير.مشخص

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, c.width, c.height);

// invert colors
for (let i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i] = 255-imgData.data[i];
  imgData.data[i+1] = 255-imgData.data[i+1];
  imgData.data[i+2] = 255-imgData.data[i+2];
  imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);

‎ويژگيCanvas ImageData.data

‎مثال ـ يك شئImageData بابعاد ‎100*100/bdi>‎ پيكسل وقرمز رنگ ايجاد ميشود .

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const imgData = ctx.createImageData(100, 100);

for (let i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10);

‎ويژگي‎data‎ يك شئ رابرگشت ميدهد كه حاوي داده هاي تصويري يك شئ ImageData‎است .براي هر پيكسل در شئImageData چهار آيتم اطلاعاتي براي رنگRGBA ‎وجود دارد، كه مقادير آن نگهداري ميشود .مطاق زير:

• R‎ـ عددرنگ قرمز‎(0-‎255)‎
• G‎ـ عددرنگ سبز‎(0-‎255)‎
• B‎ـ عددرنگ آبي‎(0-‎255)‎
• A‎ـ عدد شفافيت ‎(0-‎255)‎
  ‎-‎ 0‎شفاف و ‎-‎255‎ كاملا قابل مشاهده

‎اطلاعات مربوط به‎color/alpha‎ درآرايه اي بطول ‎4*width*height‎ ‎نگهداري ميشود، كهheight,width عرض وارتفاع شئ ImageData ميباشد .

‎مثال ـ روش براي قرمز نمودن اولين پيكسل در شئImageData

imgData = ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

‎مثال ـ روش براي سبز نمودن دومين پيكسل در شئImageData

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

‎ويژگيCanvas ImageData.height

‎ويژگي‎height‎ شئ داده تصويري ارتفاع آن را برحسب پيكسل برگشت ميدهد .

‎مثال ـ دريافت ارتفاع يك شئImageData

let height = imgData.height;

‎فرمت استفاده ـSyntax

imgData.height

‎ويژگيCanvas ImageData.width

‎ويژگي‎width‎ شئ داده تصويري عرض آن را برحسب پيكسل برگشت ميدهد.

‎مثال ـ دريافت عرض يك شئImageData

let width = imgData.width;

‎فرمت استفاده ـSyntax

imgData.width

‎متدCanvas putImageData()‎

‎متد‎putImageData()‎‎ داده هاي تصوير از يك شئ ImageData مشخص را بر روي ‎بوم قرار ميدهد.

‎مثال ـ كپي داده هاي پيكسلي يك مستطيل با‎etImageData()‎‎ وقراردادن آن با ‎متد‎ptImageData()‎ در بوم

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
  const imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

‎مثال ـ نمونه مستطيل رنگ شياري مورب

j=0;
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const imgData = ctx.createImageData(100, 100);
j=0;
for (let i = 0; i < imgData.data.length; i += 4) {
  if  (j<5) {imgData.data[i+0] =255; j+=1;}
  else if  (j<10) {imgData.data[i+0] = 125; j+=1;}
   else {imgData.data[i+0] =255; j=0;}
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}

ctx.putImageData(imgData, 10, 10);

‎فرمت استفاده ـSyntax

contex.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)