آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کن وس 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>

همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.

  • 3449
  •    1932
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .