illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

4743 ۱۵ بهمن ۹۲

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

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

نکته : دقت داشته باشید برای اینکه بدونید دقیقا چیکار کردیم به فصل دوم از سری آموزشی 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 ، باید محاسبات و برنامه های دقیقی بریزیم.با کانواس میشه هرچیزی که در تصور کدنویس(یا همون برنامه نویس) هست ،اجراش کرد.یکی از مثال هاشو میتونید در اینجا ببینید .

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 11 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    بسیار بسیار زیبا بود :)

  • ‏‏
    ماهان(۱۶ بهمن ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۱۷ بهمن ۱۳۹۲)

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

  • ‏‏
    ماهان(۱۷ بهمن ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۱۷ بهمن ۱۳۹۲)

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

  • ‏‏
    ماهان(۱۸ بهمن ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۱۸ بهمن ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۷ فروردین ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      علی امینی(۲۶ شهریور ۱۳۹۳)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram