درست کردن یک بوم برای کشیدن خط توسط canvas در html5

- visibility ۱۱ mode_comment

بنام یگانه هستی بخش

سلام خدمت همه ی سون لرنی های عزیز؛ امروز با آموزشی کاربردی از canvas با شما همراه هستم.خب قصد داریم یک بوم برای کشیدن خط درست کنیم.

info نکته :

دقت داشته باشید برای اینکه بدونید دقیقا چیکار کردیم به فصل دوم از سری آموزشی HTML5 که سجاد جان دارن زحمتشو میکشن مراجعه کنید.

draw_line

خب بدون اضافه گویی بریم سراغ اصل کارمون.

کشیدن خط با canvas

ابتدا باید یک فایل HTML5 ایجاد کنیم.(اگه آموزش کار با پلاگین Emmet رو دنبال کرده باشید، میتونید به راحتی با نوشتن html:5 و زدن دکمه TAB ، یک قالب HTML5 داشته باشید)

خط شماره یک

HTML:

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

javascript:

بسیار ساده؛ ابتدا در خط دوم گفتیم وقتی صفحه داشت لود میشد،تابع draw() اجرا بشه.

بعد هم که سه متغیر تعریف کردیم(خط 6-8) که اولی(canvas) تگ canvas مون رو میگیره بعدی (ctx) نوع طرحمون رو مشخص کردیم(که دو بعدی هستش) و بعد یک متغیر بدون مقدار تعریف کردیم که بعدا بدرد میخوره.

در خط 9 گفتیم وقتی روی canvas ، رویداد mousedown (کلیک را پایین نگه داشتن) رخ داد،متغیر isDrawing(در حال کشیدن) مقدار true بگیره و در خط بعدی (خط 11)ایجاد یک خط جدید را اعلام کردیم و بعد در خط 12 نقطه شروع خط رو ، همان نقطه ی پایین نگه داشتن کلیک، مشخص کردیم.

در خط 14 هم گفتیم وقتی موس روی تگ canvas در حال حرکت هست،اگر(خط 15)موس پایین بود(توسط متغیر isDrawing ، که وقتی کلیک موس پایین نگه داشته شد بهش مقدار true دادیم،میفهمیم که کلیک موس پایین نگه داشته هست) ، خطی در نقطه ای که موس حرکت میکنه کشیده بشه.در این قسمت مهم ترین دستور در خط 17 قرار داره که به وسیله ی اون خط رو میکشیم یعنی اگه این تابع رو صدا نزنیم خطمون کشیده نمیشه و هیچ اروری هم نخواهیم داشت.

بعد هم در خط 20 گفتیم وقتی کاربر دستشو از رو کلیک بلند کرد،متغیر isDrawing ، مقدار false بگیره ...

حالا که فهمیدیم کشیدن خط به چه صورته بیاید به خطمون استایلی بدیم!(به خاطر اینکه کدهایی که از این به بعد اضافه میکنیم در رویداد onmousemove (خط 14) هست، تنها کدهمین قسمت رو میزارم ...

خط شماره دو

javascript:OnMouseMove :

در خط 4 گفتیم تا عرض خط 10 پیکسل باشد.و در خط 5 رنگ خط را تعیین کردیم.

خط شماره سه

javascript:OnMouseMove :

در خط 6 سایه ای 7 پیکسلی برای خط ، و در خط 7 رنگ سایه را تعیین کردیم.در خط 8 هم نوع خط را تعیین کردیم که مقدار round(گرد) را به آن دادیم.

خط شماره چهار

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

پارامتر اول و دوم نقطه ی شروع رو مشخص میکنه و دو پارامتر آخر، نقطه ی پایان رو مشخص میکنه، وقتی این تابع اجرا بشه، قسمت مشخص شده پاک خواهد شد.

خب حالا نحوه ی استفاده از تابع بالا:(ابتدا دموی اون رو ببینید)

javascript:

همونطور که دیدید کد این دمو هم مثل دموی شماره 3 هست تنها تفاوتش در خط 7 هست که مشخص شده.

canvas.width ، عرض کانواس رو تعیین میکنه و canvas.height ، ارتفاع کانواس رو تعیین میکنه.

چرا از canvas استفاده کنیم؟!

توسط کانواس میتونیم جلوه هایی ایجاد کنیم که به طور معمول نمیشه اونهارو با دیگر المنت های html درست کرد.مثلا ایجاد یک نمودار دایره یا ایجاد انیمیشن های زیبا ... .برای ایجاد جلوه ها و انمیشن ها با canvas ، باید محاسبات و برنامه های دقیقی بریزیم.با کانواس میشه هرچیزی که در تصور کدنویس(یا همون برنامه نویس) هست ،اجراش کرد.یکی از مثال هاشو میتونید در اینجا ببینید .

این آموزش هم به پایان رسید.منتظر آموزش های کاربردی دیگری هم باشید.

موفق باشید؛یا علی

comment دیدگاه کاربران
mm021

بسیار بسیار زیبا بود 🙂

ماهان

سلام..ی نمونه کد میشه مثال بزنید که خط خط هایی ایجاد شده و شکلکشون ی جوری توی دیتابیس سیو بشه و بتونیم وقتی اطلاعات خط رو گرفتیم اون هارو بکشیم؟

کیوان علی محمدی

بله میشه ولی کمی سطحش میره بالاتر،باید نقطه به نقطه اطلاعات ذخیره بشه و بعد هم بعد از لود شدن توسط همین تابع در حلقه دوباره رسم بشه.

ماهان

میشه مثال ی نمونه کد بدید ؟

کیوان علی محمدی

همون طور که میدونید در تعریف هندسی خط تشکیل شده از بی نهایت نقطه،خوب حالا زمانی که موس داره بر اساس e.clientX و e.clientY نقطه در صفحه رو مشخص میکنه و رسم میکنه،ما باید مثلا این مقادیر رو در یه آرایه قرار بدیم که مقدار x میشه کلید و مقدار y میشه مقدار در آرایه،خوی حالا این آرایه رو میشه در دیتابیس ذخیره کرد،و دوباره همین مقدار رو بعد فراخوانی کرد و طبق همین نقاط دوباهر خط رو رسم کرد،میتونیم برای ذخیر آرایه در دیتابیس از توابعی مثل serialize استفاده کنیم.

ماهان

آیدی یاهوتونو آقای علی محمدی میشه در اختیارم بزارید؟
اگه امکانش هست این کد کاملشو در اختیارم بزارید خیلی ممنون میشم

کیوان علی محمدی

از همون اول بگین کدش رو میخوام دیگه :)،keyvan_alimohamadi،بعدشم نوشتنش براتون هزینه داره.

Hosein

با سلام
من با دستور img html یه عکس را توی صفحه نشان داده میشه ولی همان عکس رو توی php با دستور echo میخوام نشان بده که نمیشه
توی مرورگر mozila چیزی نشان نمیده ولی توی chrome بجای عکس علامت ضربدر نشان میده
به نظر شما مشکل کار کجاست در ضمن ادرس عکس مطمنم درسته
وقتی هم یه صفحه html را هم توی یه صفحه دیگه include میکنم بازهم همین مشکلو دارم
ممنون میشم کمک کنید. ❓

کیوان علی محمدی

شما چطوری آدرس تصویر رو در php قرار میدین؟

حمید

با سلام
خیلی ممنون بابت آموزشت
میشه بگید یه همچین لوگویی رو با canvas چطوری میشه ساخت
kalalook.com
لطفاً اگه میشه آموزشش رو قرار بدید
با تشکر

علی امینی

سلام
خواهش میکنم.
فکر نکنم زیاد سخت باشه. مکان دو نقطه رو متناسب با مکان اشاره‌گر موس تغییر میدیم و وقتی هم موس حرکت کرد، مکان قرار گیری دو نقطه رو آپدیت میکنیم.
اگه وقت آزادی پیدا کردم آموزشش رو میذارم ولی قول نمیدم.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.