بااموزشی دیگر در زمینه html درخدمت شما هستم ، میخوام در مورد ایجاد سایه در html اموزش بدم . پس با ما همراه بمانید.
از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.
Context properties
Descriptions
shadowOffsetX
فاصله ی افقی (x-axis) بین سایه و شکل در پیکسل.
shadowOffsetY
فاصله ی عمودی(y-axis) بین سایه و شکل در پیکسل.
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>
همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.
