ایچ تی ایم ایل5 کینواس

کانس عنصر ویب پیج پر گرافک بنانے کا استعمال کرتا ہے.

کانس کیا ہے؟

HTML5 کا کینوس عنصر جسٹ سکریپٹ کے ذریعے ویب پیج پر تصاویر بنانے کا استعمال کرتا ہے.

کانس ایک مستطیل علاقہ ہے، آپ کو اس کا ہر پیکسل کنٹرول کر سکتے ہیں.

کانس کئی سورجی روابط، مستطیل، دائرے، اور تصاویر شامل کرنے کی صلاحیت رکھتا ہے.

کانس کا قیام

HTML5 صفحہ کے اندر کینوس عنصر شامل کرنا:

عناصر کا 'id'، چوڑائی اور اونچائی مقرر کرنا:

<canvas id="myCanvas" width="200" height="100"></canvas>

جسٹ سکریپٹ کے ذریعے سورجی کرنا

کینوس عناصر خود کو سورجی کار کی صلاحیت نہیں رکھتی ہیں، تمام سورجی کار کا کام جسٹ سکریپٹ کے اندرامام کرنا ہوتا ہے:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

جسٹ سکریپٹ 'id' استعمال کرکے کینوس عناصر تلاش کرتا ہے:

var c=document.getElementById("myCanvas");

سپس، شیء "context" را ایجاد کنید:

var cxt=c.getContext("2d");

مجمع‌بندی "getContext("2d")" یک شیء داخلی HTML5 است که دارای روش‌های مختلفی برای نقاشی مسیر، مستطیل، دایره، حروف و اضافه کردن تصاویر است.

در این دو خط کد، یک مستطیل قرمز رنگ نقاشی می‌شود:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

روش fillStyle آن را به قرمز رنگ می‌کند، و روش fillRect شکل، مکان و اندازه را مشخص می‌کند.

فهمیدن مختصات

متد fillRect روش بالا را با پارامترهای (0,0,150,75) دارد.

این به معنای نقاشی مستطیل 150x75 روی کanvas است که از گوشه بالا چپ (0,0) شروع می‌شود.

همانطور که در تصویر زیر نشان داده شده است، مختصات X و Y کanvas برای تعیین مکان نقاشی در کanvas استفاده می‌شود.

کینواس نمونہ: کوآرڈینٹس کا مفہوم

مثال: با قرار دادن ماوس روی مستطیل، می‌توانید مختصات را ببینید

مثال‌های بیشتری از Canvas

در اینجا چند مثال دیگر از نقاشی روی عنصر canvas آورده شده است:

مثال - خط

با مشخص کردن مکان شروع و پایان، یک خط نقاشی کنید:

کینواس نمونہ: لائنز

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
مرورگر شما از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - دایره

با تعیین اندازه، رنگ و مکان، یک دایره نقاشی کنید:

کینواس نمونہ: دائرے

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
مرورگر شما از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - پیوسته‌سازی

استفاده از رنگ‌هایی که مشخص کرده‌اید برای نقاشی پس‌زمینه‌ی پیوسته:

کینواس نمونہ: گرادیئنٹ

کد JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

عنصر canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
مرورگر شما از عنصر canvas پشتیبانی نمی‌کند.
</canvas>

آزمایش کنید

مثال - تصویر

یک تصویر را روی کانواس قرار دهید:

کینواس نمونہ: تصاویر

کد JavaScript:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

عنصر canvas:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
مرورگر شما پشتیبانی از برچسب HTML5 canvas نمی‌کند.
</canvas>

آزمایش کنید

آموزش HTML Canvas

برای یادگیری بیشتر در مورد کانواس، لطفاً از آموزش HTML Canvas.

صفحات مرتبط

دستورالعمل مرجع:برچسب <canvas> HTML5

دستورالعمل مرجع:موضوع Canvas DOM HTML