پنجشنبه ۱۴ مرداد ۰۰ | ۱۶:۳۴ ۱۸ بازديد
آموزش کن وس Shadow در HTML
چطوری سایه بیندازیم؟
از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.
Descriptions
Context properties
فاصله ی افقی (x-axis) بین سایه و شکل در پیکسل.
shadowOffsetX
فاصله ی عمودی(y-axis) بین سایه و شکل در پیکسل.
shadowOffsetY
تا چه اندازه می خواهید سایه شما محو باشد.
shadowBlur
واضح است که برای تنظیم رنگ سایه استفاده می شود.
shadowColor
و در ادامه می بینید.
<div><canvas id="c8" width="200" height="200" style="border:solid 1px #000000;">canvas>div><script> var c8 = document.getElementById("c8"); var c8_context = c8.getContext("2d"); function draw_rectangle() { c8_context.shadowOffsetX = 5; c8_context.shadowOffsetY = 5; c8_context.shadowBlur = 10; c8_context.shadowColor = "DarkGoldenRod"; c8_context.fillStyle = "Gold"; c8_context.fillRect(20, 20, 100, 120); } window.onload = draw_rectangle();script
همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.
جهت مشاهده مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.
