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

کانوس عناصر ویب پیج پر گرافکس نقاشی کرنے کے لئے استعمال کئے جاتے ہیں。

کانوس کیا ہے؟

ایچ تی ایم پے کینواس عناصر جسٹ اسکریپٹ کے ذریعے ویب پیج پر تصاویر نقاشی کرتی ہیں。

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

کینواس متعدد نقاشی راستو، مستطیل، دائرے، اور تصاویر شامل کرنے کے طریقوں کا حامل ہے。

کینواس عناصر تیار کرنا

کینواس عناصر کو ایچ تی ایم پے پینج پر شامل کرنا

عناصر کا آئی ڈی، چوڑائی اور اونچائی مقرر کرنا:

<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>

جسٹ اسکریپٹ کا استعمال آئی ڈی سے کینواس عناصر تلاش کرنا ہوتا ہے:

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

سپس، شیء contest ایجاد کنید:

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

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

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

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

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

درک مختصات

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

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

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

کینواس نمونه: مفاہمت سے کورڈینٹس

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

مثال‌های بیشتر 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

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