Canvas shadowOffsetX คุณสมบัติ

คู่มือเรียกของ Canvas

การเรียกใช้และการประกาศ

shadowOffsetX คุณสมบัติตั้งค่าหรือคืนค่าระยะทางระหว่างรูปทรงและเงาตรงนั้น

  • shadowOffsetX=0 บ่งชี้ว่าเงาตั้งอยู่ใต้รูปทรง
  • shadowOffsetX=20 บ่งชี้ว่าเงาตั้งอยู่ที่ตำแหน่ง left ของรูปทรงที่ห่างออกไป 20 พิกเซล
  • shadowOffsetX=-20 บ่งชี้ว่าเงาตั้งอยู่ที่ตำแหน่ง left ของรูปทรงที่ห่างออกไป 20 พิกเซล

คำเตือน:เพื่อปรับเปลี่ยนตำแหน่งตรงด้านลงของรูปทรง ใช้ shadowOffsetY คุณสมบัติ

ตัวอย่าง

วาดวงกลมที่มีเงาเลี้ยวไปทางขวาด้วยระยะทาง 20 พิกเซล (จากตำแหน่ง left ของวงกลม):

เว็บเครื่องมือของคุณไม่สนับสนุนแท็ก canvas。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

ลองด้วยตัวเอง

ระบบแสนทึง

context.shadowOffsetX=number;

ค่ารายละเอียด

ค่า รายละเอียด
number เหมาะสมหรือไม่เหมาะสม นิยามระยะทางระหว่างเงาและรูปทรงตรงนั้น

รายละเอียดเทคนิค

ค่าเริ่มต้น： 0

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้บอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อไปนั้นไม่สนับสนุนองค์ประกอบ <canvas> อย่างไม่ต้องงาน

คู่มือเรียกของ Canvas