اساطیر زبان

عنصرcanvas (یا بوم) یک ناحیه نقشه بیتی برای کار با آن فراهم می کند. این تگ برای ترسیم گرافیکی در صفحه وب استفاده می شود.

تگ < canvas > در HTML 5 برای ترسیم گرافیکی با استفاده از زبان اسکریپتی مانند JavaScript استفاده می شود.

عنصر <canvas> فقط یک نگهدارنده برای گرافیک ها است، برای ترسیم گرافیکی به یک زبان برنامه نویسی نیاز دارید. عنصر <canvas> امکان ارائه پویا و اسکریپتی شکل های دوبعدی و تصاویر بیت مپ را فراهم می کند.

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

چگونه یک canvas ایجاد کنیم؟

Canvas یا بوم یک ناحیه مستطیلی شکل در صفحه است. این ناحیه با عنصر canvas مشخص شده است. به طور پیش فرض، عنصر <canvas> هیچ حاشیه و محتوایی ندارد، این عنصر مانند یک نگهدارنده است.

<canvas id = “mycanvas” width =”۲۰۰” height =”۱۰۰”> </canvas>

مثال برای تگ canvas

<canvas id=”myCanvas1″ width=”300″ height=”100″ style=”border:2px solid;”>

Your browser does not support the HTML5 canvas tag.

</canvas>

خروجی

word image 87

نکته: برای تعیین اندازه canvas، همیشه باید ویژگی های id و height و width را تنظیم کنید. می توانید چندین عنصر canvas را در یک صفحه داشته باشید.

مرورگرهای پشتیبان

نام عنصر chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<canvas> بله بله بله بله بله

تگ canvas با JavaScript

canvas یک صفحه دو بعدی است.

مختصات (۰,۰) گوشه سمت چپ بالای canvas را تعیین می کند. پارامترهای(۰,۰,۲۰۰,۱۰۰) در تابع ()fillRect استفاده شده است. این پارامتر مستطیل را با شروع از گوشه سمت چپ بالا مختصات (۰,۰) پر می کند و یک مستطیل ۱۰۰ * ۲۰۰ را ترسیم می کند.

<canvas id=”myCanvas” width=”250″ height=”150″ style=”border:1px solid #c3c3c3;”>

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

ctx.fillStyle = “#FF0000”;

ctx.fillRect(0,0,200,100);

</script>

خروجی

word image 88

ترسیم خط روی canvas

اگر بخواهید یک خط مستقیم روی canvas بکشید، می توانید از دو تابع زیر استفاده کنید.

(moveTo(x,y: نقطه شروع خط را مشخص می کند.

(lineTo(x,y: نقطه پایان خط را مشخص می کند.

اگر خطی بکشید که نقطه شروع آن (۰,۰) و نقطه پایان آن (۲۰۰،۱۰۰) است ، از تابع stroke برای ترسیم خط استفاده کنید.

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

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById(“myCanvasLine”);

var ctx = c.getContext(“2d”);

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

خروجی

word image 89

ترسیم دایره رویcanvas

اگر بخواهید دایره ای روی بوم بکشید، می توانید از تابع ()arc استفاده کنید:

arc(x, y, r, start, stop)

برای طرح ریزی دایره روی بوم، از یکی از تابع های ()ink مانند ()stroke یا ()fill استفاده کنید.

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

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById(“myCanvasCircle”);

var ctx = c.getContext(“2d”);

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

خروجی

word image 90

ترسیم متن بر روی canvas

توابع و ویژگی هایی برای ترسیم متن بر روی بوم وجود دارد.

ویژگی font: برای تعریف ویژگی نوع قلم برای متن استفاده می شود.

تابع(fillText(text,x,y : برای ترسیم متن پر شده روی بوم استفاده می شود. مانند قلم توپر به نظر می رسد.

تابع (strokeText(text,x,y: برای ترسیم متن روی بوم استفاده می شود اما متن پر نشده است.

مثال با تابع()fillText

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

Sorry! Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById(“myCanvasText1”);

var cctx = c.getContext(“2d”);

ctx.font = “۳۰px Arial”;

ctx.fillText(“Hello JavaTpoint”,10,50);

</script>

خروجی

word image 91

مثال با تابع ()strokeText

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

 Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById(“myCanvasText2”);

var cctx = c.getContext(“2d”);

ctx.font = “۳۰px Arial”;

ctx.strokeText(“Hello JavaTpoint”,10,50);

</script>

خروجی

word image 92

تفاوت پک های حرفه ای ما با آموزشهای رایگان: بطور خلاصه از زمین تا آسمان! 1-پکها، جدیدترین نسخه نرم افزارها را آموزش می دهند با قابلیت های بسیار بیشتر. 2-پکها توسط متخصص آن نرم افزار، به صورت کاملا پروژه محور و با حل چالش هایی که در مسیر کار عملی و حرفه ای با آن روبرو می شوید تهیه شده اند و بعد از استفاده، کاملا برای بازار کار آماده اید! 3- متد این پکها کاملا کار شده و تا ماهها، در ذهن تان ماندگارند و یادگیری بسیار سریعتر و کاملتری خواهید داشت. آموزشهای رایگان فقط دستورات نرم افزارها را (آنهم ناقص) بیان می کنند و تازه برای ورود به بازار باید ماهها تجربه عملی هم کسب کنید !!

turned_in

چرب زبان

با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !


حتما بخوانید!

1 دیدگاه. ارسال دیدگاه جدید

  • سلام اقا حیدری عزیز
    ممنون بابت سایت خیلی خوبتون تشکر میکنم
    ممنون میشم یه راهنمایم کنید
    سایت های برای تمرین پروژه های html css js میتونید بهم معرفی کنید -چون با تکرار میشه تو این حوزه مسلط شد
    تشکر

    پاسخ

دیدگاهتان را بنویسید

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست