اعمال سبک ها و رنگ ها

در فصل ترسیم اشکال، ما فقط از خطوط پیش‌فرض و استایل‌های پر استفاده کردیم. در اینجا گزینه های بوم را که در اختیار داریم بررسی می کنیم تا نقاشی هایمان کمی جذاب تر شود. شما یاد خواهید گرفت که چگونه رنگ ها، سبک های مختلف، شیب، الگوها و سایه ها را به نقاشی های خود اضافه کنید.

توجه: محتوای بوم برای صفحه‌خوان‌ها قابل دسترسی نیست. اگر بوم صرفاً تزئینی است، روی برچسب آغازین نقش = "ارائه" قرار دهید. در غیر این صورت، متن توصیفی را به‌عنوان مقدار مشخصه aria-label مستقیماً روی خود عنصر بوم قرار دهید یا محتوای بازگشتی را که در تگ بوم باز و بسته شده قرار داده شده است، اضافه کنید. محتوای بوم بخشی از DOM نیست، اما محتوای بازگشتی تو در تو بخشی از DOM است.

رنگ ها

تا به حال ما فقط روش های زمینه ترسیم را دیده ایم. اگر بخواهیم رنگ ها را روی یک شکل اعمال کنیم، دو ویژگی مهم وجود دارد که می توانیم استفاده کنیم: fillStyle و strokeStyle.

استایل مورد استفاده هنگام پر کردن اشکال را تنظیم می کند.

استایل را برای خطوط کلی شکل ها تنظیم می کند.

توجه: هنگامی که ویژگی strokeStyle و/یا fillStyle را تنظیم می‌کنید، مقدار جدید پیش‌فرض برای تمام شکل‌هایی است که از آن به بعد ترسیم می‌شوند. برای هر شکلی که می‌خواهید رنگ متفاوتی داشته باشید، باید ویژگی fillStyle یا strokeStyle را دوباره اختصاص دهید.

رشته های معتبری که می توانید وارد کنید، طبق مشخصات باید مقادیر CSS باشند. هر یک از مثال های زیر یک رنگ را توصیف می کند.

یک مثال fillStyle

در این مثال، یک بار دیگر از دو حلقه برای رسم شبکه ای از مستطیل ها استفاده می کنیم که هر کدام به رنگ متفاوتی هستند. تصویر به دست آمده باید چیزی شبیه به اسکرین شات باشد. هیچ چیز خیلی دیدنی اینجا اتفاق نمی افتد. ما از دو متغیر i و j برای تولید یک رنگ RGB منحصر به فرد برای هر مربع استفاده می کنیم و فقط مقادیر قرمز و سبز را تغییر می دهیم. کانال آبی مقدار ثابتی دارد. با تغییر کانال ها می توانید انواع پالت ها را تولید کنید. با افزایش مراحل، می‌توانید به چیزی دست پیدا کنید که شبیه پالت‌های رنگی فتوشاپ باشد.

نتیجه به این شکل است:

اسکرین شات	نمونه زنده

یک مثال strokeStyle

این مثال مشابه مثال بالا است، اما از ویژگی strokeStyle برای تغییر رنگ خطوط کلی شکل ها استفاده می کند. برای رسم دایره به جای مربع از متد arc() استفاده می کنیم.

نتیجه به این شکل است:

اسکرین شات	نمونه زنده

شفافیت

علاوه بر کشیدن اشکال مات روی بوم، می توانیم اشکال نیمه شفاف (یا نیمه شفاف) را نیز ترسیم کنیم. این کار با تنظیم ویژگی globalAlpha یا با اختصاص یک رنگ نیمه شفاف به استایل و/یا پر کردن انجام می شود.

مقدار شفافیت مشخص شده را برای تمام اشکال بعدی که روی بوم کشیده شده اند اعمال می کند. مقدار باید بین 0. 0 (کاملا شفاف) تا 1. 0 (کاملاً مات) باشد. این مقدار به طور پیش فرض 1. 0 (کاملاً مات) است.

اگر می‌خواهید اشکال زیادی روی بوم با شفافیت مشابه ترسیم کنید، ویژگی globalAlpha می‌تواند مفید باشد، اما در غیر این صورت، تنظیم شفافیت روی هر اشکال هنگام تنظیم رنگ‌های آن‌ها معمولا مفیدتر است.

از آنجایی که ویژگی های strokeStyle و fillStyle مقادیر رنگ CSS rgba را می پذیرند، می توانیم از نماد زیر برای اختصاص یک رنگ شفاف به آنها استفاده کنیم.

تابع rgba() شبیه تابع rgb() است اما یک پارامتر اضافی دارد. آخرین پارامتر مقدار شفافیت این رنگ خاص را تعیین می کند. محدوده معتبر دوباره بین 0. 0 (کاملا شفاف) و 1. 0 (کاملاً مات) است.

یک مثال جهانی آلفا

در این مثال، پس زمینه ای از چهار مربع رنگی مختلف ترسیم می کنیم. در بالای اینها، مجموعه ای از دایره های نیمه شفاف را ترسیم می کنیم. ویژگی globalAlpha روی 0. 2 تنظیم شده است که از آن نقطه به بعد برای همه اشکال استفاده می شود. هر مرحله در حلقه for مجموعه ای از دایره ها را با شعاع فزاینده ترسیم می کند. نتیجه نهایی یک گرادیان شعاعی است. با قرار دادن دایره های بیشتری روی هم، شفافیت دایره هایی را که قبلاً ترسیم شده اند به طور موثر کاهش می دهیم. با افزایش تعداد گام ها و در واقع کشیدن دایره های بیشتر، پس زمینه به طور کامل از مرکز تصویر محو می شود.

اسکرین شات	نمونه زنده

مثالی با استفاده از rgba()

در این مثال دوم، ما کاری شبیه به مورد بالا انجام می دهیم، اما به جای کشیدن دایره ها روی هم، مستطیل های کوچکی را با شفافیت افزایش داده ام. استفاده از rgba() کمی کنترل و انعطاف پذیری بیشتری به شما می دهد زیرا می توانیم استایل fill و stroke را به صورت جداگانه تنظیم کنیم.

اسکرین شات	نمونه زنده

سبک های خط

چندین ویژگی وجود دارد که به ما اجازه می دهد خطوط را سبک کنیم.

عرض خطوط ترسیم شده در آینده را تنظیم می کند.

ظاهر انتهای خطوط را تنظیم می کند.

ظاهر "گوشه ها" را در جایی که خطوط به هم می رسند تنظیم می کند.

زمانی که دو خط با زاویه تند به هم می‌پیوندند، محدودیتی برای میتر ایجاد می‌کند تا به شما اجازه دهد ضخامت محل اتصال را کنترل کنید.

آرایه الگوی خط خط فعلی را که حاوی تعدادی از اعداد غیر منفی است ، برمی گرداند.

الگوی خط خط فعلی را تنظیم می کند.

مشخص می کند که از کجا می توان یک آرایه خط را روی یک خط شروع کرد.

با دیدن مثالهای زیر ، درک بهتری از آنچه انجام می دهند ، می توانید درک بهتری داشته باشید.

یک مثال پهنای باند

این ویژگی ضخامت خط فعلی را تعیین می کند. مقادیر باید اعداد مثبت باشند. به طور پیش فرض این مقدار روی 1. 0 واحد تنظیم شده است.

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

در مثال زیر ، 10 خط مستقیم با افزایش عرض خط ترسیم می شوند. خط در سمت چپ 1. 0 واحد عرض دارد. با این حال ، به دلیل موقعیت مسیر ، چپ ترین و تمام خطوط ضخامت با وسعت عجیب و غریب ، واضح به نظر نمی رسند.

اسکرین شات	نمونه زنده

به دست آوردن خطوط واضح نیاز به درک چگونگی نوازش مسیرها دارد. در تصاویر زیر ، شبکه نشان دهنده شبکه مختصات بوم است. مربع بین شبکه ها پیکسل های واقعی روی صفحه هستند. در اولین تصویر شبکه زیر ، مستطیل از (2،1) تا (5،5) پر شده است. کل منطقه بین آنها (قرمز روشن) در مرزهای پیکسل قرار می گیرد ، بنابراین مستطیل پر شده حاصل از آن دارای لبه های واضح خواهد بود.

اگر مسیری را از (3،1) به (3،5) با ضخامت خط 1. 0 در نظر بگیرید ، در تصویر دوم به وضعیت خود پایان می دهید. منطقه واقعی که باید پر شود (آبی تیره) فقط در نیمه راه پیکسل ها در هر طرف مسیر گسترش می یابد. تقریب این امر باید ارائه شود ، به این معنی که آن پیکسل ها فقط تا حدی سایه زده می شوند و منجر به کل منطقه (آبی روشن و آبی تیره) می شوند که فقط با رنگ و رنگ فقط به اندازه رنگ سکته مغزی پر شده است. این همان اتفاقی است که با خط عرض 1. 0 در کد مثال قبلی اتفاق می افتد.

برای رفع این مسئله ، شما باید در ایجاد مسیر خود بسیار دقیق باشید. با دانستن اینکه یک خط عرض 1. 0 نیمی از واحد را به هر دو طرف مسیر گسترش می دهد ، مسیر (3. 5،1) تا (3. 5،5) در وضعیت تصویر سوم ایجاد می کند - عرض 1. 0 خط به طور کامل به پایان می رسد ودقیقاً یک خط عمودی پیکسل را پر کنید.

توجه: توجه داشته باشید که در مثال خط عمودی ما، موقعیت Y همچنان به یک موقعیت شبکه اعداد صحیح ارجاع می‌دهد - اگر اینطور نبود، پیکسل‌هایی با نیمی از پوشش در نقاط انتهایی مشاهده می‌شد (اما توجه داشته باشید که این رفتار به سبک lineCap فعلی بستگی دارد. که مقدار پیش‌فرض آن butt است؛ ممکن است بخواهید با تنظیم سبک lineCap بر روی مربع، سکته‌های منسجم را با مختصات نیم پیکسل برای خطوط با عرض فرد محاسبه کنید، به طوری که مرز بیرونی stroke در اطراف نقطه پایانی به طور خودکار گسترش یابد تا خطوط را پوشش دهد. دقیقا کل پیکسل).

همچنین توجه داشته باشید که فقط نقاط شروع و پایان یک مسیر تحت تأثیر قرار می گیرند: اگر مسیری با ()closePath بسته شود، نقطه شروع و پایانی وجود ندارد. در عوض، تمام نقاط انتهایی مسیر با استفاده از تنظیمات فعلی سبک lineJoin که مقدار پیش‌فرض آن miter است، به بخش قبلی و بعدی متصل شده خود متصل می‌شوند، با این اثر که مرزهای بیرونی بخش‌های متصل به‌طور خودکار به نقطه تقاطع آنها گسترش می‌یابد. اگر آن بخش‌های متصل افقی و/یا عمودی باشند، استروک ارائه‌شده دقیقاً پیکسل‌های کامل را در مرکز هر نقطه پایانی پوشش می‌دهد. برای نمایش این سبک های خطوط اضافی، دو بخش بعدی را ببینید.

برای خطوط با عرض زوج، هر نیمه یک عدد صحیح پیکسل است، بنابراین شما مسیری را می خواهید که بین پیکسل ها باشد (یعنی (3،1) تا (3،5))، به جای پایین بودن وسط پیکسل ها..

در حالی که هنگام کار با گرافیک دوبعدی مقیاس پذیر کمی دردناک است، اما توجه به شبکه پیکسل و موقعیت مسیرها تضمین می کند که نقاشی های شما بدون در نظر گرفتن مقیاس بندی یا هر تغییر دیگری که در آن وجود دارد، درست به نظر می رسند. یک خط عمودی با عرض 1. 0 که در موقعیت صحیح کشیده شده است، وقتی 2 کوچک شود، به یک خط 2 پیکسلی واضح تبدیل می شود و در موقعیت صحیح ظاهر می شود.

یک مثال lineCap

ویژگی lineCap نحوه ترسیم نقاط انتهایی هر خط را مشخص می کند. سه مقدار ممکن برای این ویژگی وجود دارد که عبارتند از: لب به لب، گرد و مربع. به طور پیش فرض این ویژگی روی butt تنظیم شده است:

انتهای خطوط در نقاط انتهایی مربع هستند.

انتهای خطوط گرد است.

انتهای خطوط با اضافه کردن یک جعبه با عرض مساوی و نیمی از ارتفاع ضخامت خط مربع می شود.

در این مثال، ما سه خط ترسیم می کنیم که هر کدام دارای مقدار متفاوتی برای ویژگی lineCap است. من همچنین دو راهنما اضافه کردم تا تفاوت های دقیق بین این سه را ببینید. هر یک از این خطوط دقیقاً روی این راهنماها شروع و به پایان می رسد.

خط در سمت چپ از گزینه پیش فرض باسن استفاده می کند. متوجه خواهید شد که با راهنماها کاملاً گرگرفتگی شده است. دوم برای استفاده از گزینه دور تنظیم شده است. این یک نیم دایره را به انتها اضافه می کند که دارای شعاع نیمی از عرض خط است. خط در سمت راست از گزینه Square استفاده می کند. این یک جعبه با عرض مساوی و نیمی از ارتفاع ضخامت خط اضافه می کند.

اسکرین شات	نمونه زنده

یک مثال LineJoin

ویژگی LineJoin تعیین می کند که چگونه دو بخش اتصال (از خطوط ، قوس ها یا منحنی ها) با طول غیر صفر به شکل به هم وصل می شوند (بخش های انحطاط با طول صفر ، که نقاط پایانی و نقاط کنترل آن دقیقاً در همان موقعیت هستند ، رد می شوند)واد

سه مقدار ممکن برای این خاصیت وجود دارد: Round ، Bevel و Miter. به طور پیش فرض این ویژگی روی MITER تنظیم شده است. توجه داشته باشید که در صورتی که دو بخش متصل از همان جهت برخوردار باشند ، تنظیم LineJoin هیچ تاثیری ندارد ، زیرا در این مورد هیچ منطقه پیوستن اضافه نمی شود:

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

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

بخش های متصل با گسترش لبه های بیرونی خود برای اتصال در یک نقطه واحد ، با تأثیر پر کردن یک منطقه اضافی به شکل Lozenge ، پیوستند. این تنظیم توسط خاصیت MiterLimit که در زیر توضیح داده شده است ، انجام می شود.

مثال زیر سه مسیر مختلف را ترسیم می کند ، که نشان می دهد هر یک از این سه تنظیمات خاصیت LineJoin. خروجی در بالا نشان داده شده است.

اسکرین شات	نمونه زنده

نسخه ی نمایشی از دارایی میتلیمیت

همانطور که در مثال قبلی مشاهده کرده اید ، هنگام پیوستن به دو خط با گزینه MITER ، لبه های بیرونی این دو خط اتصال تا جایی که آنها ملاقات می کنند گسترش می یابد. برای خطوطی که در زاویه های بزرگی با یکدیگر قرار دارند ، این نقطه از نقطه اتصال داخلی فاصله ندارد. با این حال ، با کاهش زاویه بین هر خط ، فاصله (طول میتر) بین این نقاط به صورت نمایی افزایش می یابد.

خاصیت MiterLimit تعیین می کند که نقطه اتصال بیرونی تا چه حد می تواند از نقطه اتصال داخلی قرار گیرد. اگر دو خط از این مقدار فراتر رود ، به جای آن ، یک پیوستن یک بوی کشیده می شود. توجه داشته باشید که حداکثر طول میتر محصول عرض خط است که در سیستم مختصات فعلی اندازه گیری می شود ، با ارزش این خاصیت MiterLimit (مقدار پیش فرض آن 10. 0 در HTML است) ، بنابراین MiterLimit می تواند به طور مستقل از مقیاس نمایش فعلی تنظیم شودیا هرگونه تغییر مسیر از مسیرها: این فقط بر شکل مؤثر لبه های خط تأثیر می گذارد.

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

• miterlimit = حداکثر miterl طول / linewidth = 1 / sin (min θ / 2)
• حد پیش فرض MITER از 10. 0 تمام میترها را برای زاویه های تیز زیر حدود 11 درجه می گذارد.
• محدودیت MITER برابر با √2 ≈ 1. 4142136 (گرد شده) برای همه زاویه های حاد میترهایی می کند ، و نگه داشتن میتری فقط برای زاویه های چاق یا راست می پیوندد.
• حد مجاز برابر با 1. 0 معتبر است اما همه میترها را غیرفعال می کند.
• مقادیر زیر 1. 0 برای محدودیت MITER نامعتبر است.

در اینجا یک نسخه ی نمایشی کوچک وجود دارد که در آن می توانید MiterLimit را به صورت پویا تنظیم کنید و ببینید که چگونه این شکل ها روی بوم تأثیر می گذارد. خطوط آبی نشان می دهد که نقاط شروع و پایانی برای هر یک از خطوط موجود در الگوی زیگ زاگ است.

اگر در این نسخه ی نمایشی مقدار miterlimit زیر 4. 2 را مشخص کنید ، هیچ یک از گوشه های قابل مشاهده با یک پسوند میت نمی پیوندند ، بلکه فقط با یک تخته کوچک در نزدیکی خطوط آبی. با یک میتلیملیت بالاتر از 10 ، بیشتر گوشه های این نسخه ی نمایشی باید با یک میت دور به دور از خطوط آبی بپیوندند و ارتفاع آن بین گوشه ها از چپ به راست کاهش می یابد زیرا آنها با زوایای در حال رشد ارتباط دارند. با مقادیر میانی ، گوشه های سمت چپ فقط با یک تخته در نزدیکی خطوط آبی و گوشه های سمت راست با یک پسوند میت (همچنین با ارتفاع کاهش) می پیوندند.

اسکرین شات	نمونه زنده

با استفاده از خطوط خط

روش SetLinedash و ویژگی LinedAshoffset الگوی خط برای خطوط را مشخص می کند. روش SetLinedash لیستی از اعداد را می پذیرد که مسافت ها را برای ترسیم یک خط و یک شکاف به طور متناوب مشخص می کند و ویژگی LinedAshoffset یک افست را از کجا برای شروع الگوی تعیین می کند.

در این مثال ما در حال ایجاد اثر مورچه های راهپیمایی هستیم. این یک تکنیک انیمیشن است که اغلب در ابزارهای انتخاب برنامه های گرافیکی رایانه ای یافت می شود. این به کاربر کمک می کند تا با متحرک کردن مرز ، مرز انتخاب را از پس زمینه تصویر تشخیص دهد. در بخش بعدی این آموزش ، می توانید یاد بگیرید که چگونه این کار و سایر انیمیشن های اساسی را انجام دهید.

اسکرین شات	نمونه زنده

شیب

درست مانند هر برنامه ترسیم معمولی ، می توانیم با استفاده از شیب های خطی ، شعاعی و مخروطی ، شکل های سکته مغزی را پر و سکته کنیم. ما با استفاده از یکی از روشهای زیر یک شیء بومگرافی ایجاد می کنیم. سپس می توانیم این شی را به ویژگی های FillStyle یا Strokestyle اختصاص دهیم.

یک شیء شیب خطی با نقطه شروع (x1 ، y1) و نقطه پایانی (x2 ، y2) ایجاد می کند.

یک شیب شعاعی ایجاد می کند. پارامترها دو حلقه را نشان می دهد ، یکی با مرکز آن در (x1 ، y1) و شعاع R1 و دیگری با مرکز آن در (x2 ، y2) با شعاع R2.

یک شیء شیب مخروطی با زاویه شروع زاویه در رادیان ، در موقعیت (x ، y) ایجاد می کند.

پس از ایجاد یک شیء بومگرافی ، می توانیم با استفاده از روش AddColorStop () رنگ را به آن اختصاص دهیم.

یک توقف رنگ جدید روی شیء شیب ایجاد می کند. موقعیت تعدادی بین 0. 0 تا 1. 0 است و موقعیت نسبی رنگ در شیب را تعریف می کند و آرگومان رنگ باید رشته ای باشد که یک CSS را نشان می دهد ، و نشانگر رنگی است که شیب باید در آن جبران به انتقال برسد.

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

یک مثال سازگار با سازگار

در این مثال ، ما دو شیب مختلف ایجاد خواهیم کرد. همانطور که در اینجا مشاهده می کنید ، هر دو ویژگی Strokestyle و FillStyle می توانند یک شیء بوم را به عنوان ورودی معتبر بپذیرند.

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

در شیب دوم ، ما رنگ شروع (در موقعیت 0. 0) را اختصاص ندادیم زیرا کاملاً ضروری نبود ، زیرا به طور خودکار رنگ توقف رنگ بعدی را فرض می کند. بنابراین ، اختصاص رنگ سیاه در موقعیت 0. 5 به طور خودکار شیب را می کند ، از ابتدا تا این توقف ، سیاه.

اسکرین شات	نمونه زنده

یک مثال createradialgradient

در این مثال ، چهار شیب شعاعی مختلف را تعریف خواهیم کرد. از آنجا که ما بر نقاط شروع و بسته شدن شیب کنترل داریم ، می توانیم به جلوه های پیچیده تری نسبت به آنچه که معمولاً در شیب های شعاعی "کلاسیک" که در آن می بینیم ، بدست آوریم ، به عنوان مثال ، فتوشاپ (یعنی شیب با یک مرکز واحدنکته ای که شیب به شکل دایره ای به بیرون گسترش می یابد).

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

آخرین توقف رنگ در هر یک از چهار شیب از یک رنگ کاملاً شفاف استفاده می کند. اگر می خواهید یک انتقال خوب از این به توقف رنگ قبلی داشته باشید ، هر دو رنگ باید برابر باشند. این از کد بسیار واضح نیست زیرا از دو روش مختلف CSS COLOR به عنوان یک تظاهرات استفاده می کند ، اما در شیب اول #019F62 = RGBA (1،159،98،1).

اسکرین شات	نمونه زنده

یک مثال Createconicgradient

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

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

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

اسکرین شات	نمونه زنده

الگوهای

در یکی از نمونه های صفحه قبلی ، از یک سری حلقه ها برای ایجاد الگویی از تصاویر استفاده کردیم. با این حال ، یک روش بسیار ساده تر وجود دارد: روش CreatePattern ().

یک شی الگوی بوم جدید ایجاد و برمی گرداند. تصویر منبع تصویر است (یعنی یک HTMLImageElement، یک SVGImageElement، یک HTMLCanvasElement دیگر یا یک OffscreenCanvas، یک HTMLVideoElement یا یک VideoFrame، یا یک ImageBitmap). type رشته ای است که نحوه استفاده از تصویر را نشان می دهد.

نوع نحوه استفاده از تصویر برای ایجاد الگو را مشخص می کند و باید یکی از مقادیر رشته زیر باشد:

تصویر را در دو جهت عمودی و افقی کاشی می کند.

تصویر را به صورت افقی کاشی می کند اما نه عمودی.

تصویر را به صورت عمودی اما نه افقی کاشی می کند.

تصویر را کاشی نمی کند. فقط یکبار استفاده شده

ما از این روش برای ایجاد یک شی CanvasPattern استفاده می کنیم که بسیار شبیه به روش های گرادیان است که در بالا دیدیم. هنگامی که یک الگو را ایجاد کردیم، می توانیم آن را به ویژگی های fillStyle یا strokeStyle اختصاص دهیم. مثلا:

توجه: مانند متد drawImage()، باید مطمئن شوید که تصویری که استفاده می‌کنید قبل از فراخوانی این متد بارگذاری شده است، در غیر این صورت ممکن است الگوی اشتباه ترسیم شده باشد.

یک مثال createPattern

در این مثال آخر، ما یک الگو برای اختصاص دادن به ویژگی fillStyle ایجاد می کنیم. تنها چیزی که قابل توجه است استفاده از کنترل کننده بارگذاری تصویر است. این برای اطمینان از بارگذاری تصویر قبل از تخصیص به الگو است.

اسکرین شات	نمونه زنده

سایه ها

استفاده از سایه ها فقط شامل چهار ویژگی است:

فاصله افقی را که سایه باید از جسم ادامه دهد را نشان می دهد. این مقدار تحت تأثیر ماتریس تبدیل قرار نمی گیرد. پیش فرض 0 است.

نشان دهنده فاصله عمودی سایه باید از جسم باشد. این مقدار تحت تأثیر ماتریس تبدیل قرار نمی گیرد. پیش فرض 0 است.

اندازه اثر تاری را نشان می دهد. این مقدار با تعدادی پیکسل مطابقت ندارد و تحت تأثیر ماتریس تبدیل فعلی قرار نمی گیرد. مقدار پیش فرض 0 است.

یک مقدار رنگ استاندارد CSS که رنگ افکت سایه را نشان می دهد. به طور پیش فرض، سیاه و سفید کاملاً شفاف است.

ویژگی‌های shadowOffsetX و shadowOffsetY نشان می‌دهند که سایه چقدر باید از شی در جهت‌های X و Y امتداد داشته باشد. این مقادیر تحت تأثیر ماتریس تبدیل فعلی قرار نمی گیرند. از مقادیر منفی برای ایجاد سایه به سمت بالا یا چپ استفاده کنید و از مقادیر مثبت برای ایجاد سایه به پایین یا به راست استفاده کنید. این هر دو به طور پیش فرض 0 هستند.

ویژگی shadowBlur اندازه افکت تاری را نشان می دهد. این مقدار با تعدادی پیکسل مطابقت ندارد و تحت تأثیر ماتریس تبدیل فعلی قرار نمی گیرد. مقدار پیش فرض 0 است.

خاصیت ShadowColor یک مقدار رنگی CSS استاندارد است که رنگ اثر سایه را نشان می دهد. به طور پیش فرض ، کاملاً شفاف سیاه است.

توجه: سایه ها فقط برای عملیات آهنگسازی منبع تهیه شده اند.

یک نمونه متن سایه دار

این مثال یک رشته متنی را با اثر سایه دار ترسیم می کند.

اسکرین شات	نمونه زنده

ما در فصل بعد در مورد ترسیم متن به ویژگی FONT و روش FillText خواهیم پرداخت.

قوانین پر کردن بوم

هنگام استفاده از پر (یا کلیپ و ispointinpath) می توانید به صورت اختیاری یک الگوریتم قانون پر کنید که با استفاده از آن می توانید یک نقطه در داخل یا خارج از یک مسیر باشد و بنابراین اگر پر شود یا نه. این زمانی مفید است که یک مسیر از خود تقاطع کند یا تو در تو باشد.< SPAN> خاصیت ShadowColor یک مقدار رنگی CSS استاندارد است که رنگ اثر سایه را نشان می دهد. به طور پیش فرض ، کاملاً شفاف سیاه است.