ผ้าใบ HTML เงาOffsetXคุณสมบัติ
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าโดยวางเงาไว้ทางขวา 20 พิกเซล (จากตำแหน่งด้านซ้ายของสี่เหลี่ยมผืนผ้า):
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| shadowOffsetX | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
คุณสมบัติ shadowOffsetX ตั้งค่าหรือส่งกลับระยะทางแนวนอนของเงาจากรูปร่าง
shadowOffsetX=0 แสดงว่าเงาอยู่ด้านหลังรูปร่าง
shadowOffsetX=20 แสดงว่าเงาเริ่มไปทางขวา 20 พิกเซล (จากตำแหน่งด้านซ้ายของรูปร่าง)
shadowOffsetX=-20 แสดงว่าเงาเริ่มไปทางซ้าย 20 พิกเซล (จากตำแหน่งด้านซ้ายของรูปร่าง)
เคล็ดลับ:ในการปรับระยะห่างแนวตั้งของเงาจากรูปร่าง ให้ใช้คุณสมบัติshadowOffsetY
| ค่าเริ่มต้น: | 0 |
|---|---|
| ไวยากรณ์ JavaScript: | บริบท .shadowOffsetX= หมายเลข ; |
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| number | A positive or negative number that defines the horizontal distance of the shadow from the shape |
❮ อ้างอิงผ้าใบ HTML