globalAlpha ของ HTML canvas
คำนิยามและวิธีใช้
globalAlpha นั้นจะตั้งค่าหรือกลับรับค่าความโปร่งใส (alpha หรือ ความโปร่งใส) ของการวาด。
globalAlpha ค่าของตัวแปรต้องอยู่ในช่วง 0.0เลขระหว่าง (แบบโปร่งใสที่สุด) กับ 1.0เลขระหว่าง (บริสุทธิ์) และ
ตัวอย่าง
เริ่มต้นด้วยการวาดวงกลมสีแดง จากนั้นตั้งค่าความโปร่งใส (globalAlpha) ให้เป็น 0.2 แล้ววาดวงกลมสีเขียวและสีส้ม:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// ปรับแต่งความโปร่งใส
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
รูปแบบ
context.globalAlpha=number;
ค่าของรายละเอียด
| ค่า | รายละเอียด |
|---|---|
| number | ค่าสีทรานส์พาเรนท์ ต้องอยู่ระหว่าง 0.0 (ทรานส์พาเรนท์สุดท้าย) และ 1.0 (ไม่ทรานส์พาเรนท์) |
รายละเอียดเทคนิค
| ค่าเริ่มต้น： | 1.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> แบบภาพ
