فهرست

۱- HTML Canvas
2- کشیدن نقاشی روی بوم
۳- مختصات بوم در html

سلام.از اینکه سایت  سوفرا  را، برای پاسخ به سوالات خود انتخاب کردید خوشحال هستیم . با میخک همراه باشید.

HTML Canvas

تگ canvas، برای رسم گرافیک در یک صفحه وب استفاده می شود.

گرافیک  زیر که ، با تگ <canvas> ایجاد شده است، نمونه از گرافیک در وب است.

یک بوم (Canvas )،  یک ناحیه مستطیلی در یک صفحه HTML است. به طور پیشفرض، یک بوم دارای مرز و محتوایی نیست.

کد html آن، به صورت زیر است:
همیشه  ویژگی  id  که برای اشاره به یک اسکریپت است و ویژگیهای width و height برای تعیین طول عرض بوم را مشخص کنید. برای اضافه کردن یک مرز(border) از ویژگی style استفاده می شود.

در ویرایشگر زیر،  نمونه  ای از یک بوم پایه و خالی با نام آی دی myCanvas، ایجاد شده است. به این صورت که با استفاده از ویژگی style، یک border به دادیم:

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

کشیدن نقاشی روی بوم با JavaScript

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

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

۱) پیدا کردن تگ canvas

در ابتدا باید تگ canvas را پیدا کنیم.این کار توسط متد getElementById از html DOM انجام میگیرد.

۲) ایجاد شی ای برای رسم(قلم)

در مرحله دوم مابه یک قلم جهت رسم بر روی بوم نیاز داریم. شی getContext() دارای ویژگی ها و متدهایی برای رسم میباشد:

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

ورودی ۲d و مفهوم آن این است که طرح ما دو بعدی است.

۳) رسم روی بوم

اکنون موقع رسم فرا رسیده است. با fillStyle آبجکت رسم را با رنگ قرمز ست می کینم.

ctx.fillStyle = “#FF0000”;

ویژگی fillStyle میتونه یک گرادیانت، پترن و… باشد.

fillRect(x,y,width,height) با این متد هم میتونم داخل بوم یک مستطیل بکشیم و با fillStyle رنگ آن را قرمز کنیم.

  مختصات canvas درhtml

canvas یک سیستم صفحه آرایی دو بعدی است. گوشه سمت چپ و بالا مختصات (۰و۰) را ر این کد شامل میشود. در قسمت قبل با استفاده از متد fillRect(0,0,150,75) یک مستطیل کشیدیم. به این معنا که از مختصات(۰و۰) شروع، و یک مستطیل ۱۵۷×۷۵ پیکسلی کشیدیم.

رسم خط

برای رسم خط از متد های زیر استفاده می کنیم:
moveTo(x,y) – تعریف نقطه شروع از یک خط
lineTo(x,y) – تعریف نقطه پایان از یک خط

از متد stroke() به عوان جوهر جهت رسم خط استفاده میکنیم. برای دسترسی به کد و اجرای آن به
۱ myCanvas مراجعه کنید

رسم دایره

برای رسم یک دایره روی بوم ، باید از متد های زیر استفاه کنیم:
beginPath() – شروع مسیر
arc(x,y,r,startangle,endangle) –

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bzRvom” default_tab=”html,result” user=”intelmahaz1234″]See the Pen bzRvom by m (@intelmahaz1234) on CodePen.[/codepen_embed]

---