میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

تگ Canvas در Html

تگ Canvas در Html

تگ Canvas چیست و چه کاربردی دارد؟

از تگ canvas برای ترسیم گرافیک در یک صفحه وب استفاده می شود.
از تگ canvas برای ترسیم گرافیک ، از طریق JavaScript استفاده می شود.
تگ canvas فقط ظرفی برای گرافیک است. برای رسم واقعی گرافیک ها باید از JavaScript استفاده کنید.
Canvas روشهای مختلفی برای ترسیم مسیرها ، جعبه ها ، دایره ها ، متن و افزودن تصاویر دارد.

 

canvas  یک ناحیه مستطیل شکل در یک صفحه HTML است. canvas  به طور پیش فرض حاشیه و محتوایی ندارد.

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

توجه: همیشه یک مشخصه id ( در یک اسکریپت به آن اشاره می شود) ، و یک ویژگی عرض و ارتفاع برای تعیین اندازه بوم مشخص کنید. برای افزودن حاشیه ، از ویژگی style استفاده کنید.

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>

نتیجه درمرورگر:

 

در اینجا مثالی از canvas اولیه و خالی آورده شده است:

 

پس از ایجاد ناحیه canvas  مستطیل ، باید JavaScript را برای انجام ترسیم اضافه کنید.

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

کد جاوا اسکریپ که یک خط از وسط مستطیل می کشد.

نتیجه در مرورگر :

 

canvas با جاوا اسکریپ
canvas با جاوا اسکریپ

 

 

کد جاوا اسکریپ برای کشیدن یک دایره :

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95۵۰۴۰۰۲ * Math.PI);
ctx.stroke();
</script>

کد جاوا اسکریپ برای کشیدن یک متن :

بیشتر
آموزش طراحی صفحات وب با HTML5 و CSS3

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “۳۰px Arial”;
ctx.fillText(“Hello World”۱۰۵۰);
</script>

کد جاوا اسکریپ برای کشیدن یک متن تو خالی :

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “۳۰px Arial”;
ctx.strokeText(“Hello World”۱۰۵۰);
</script>

کد جاوا اسکریپ برای کشیدن رنگ به شیب خطی (رنگ ها از کم رنگ به طرف پر رنگ می روند)

<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createLinearGradient(۰۲۰۰۰);
grd.addColorStop(“red”);
grd.addColorStop(1“white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10۱۰۱۵۰۸۰);
</script>

 

 

 

 

 

امیدواریم این بخش از آموزش در مورد تگ Canvas در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟