เมธอดนี้ส่งคืนอ็อบเจ็กต์ CanvasGradient ที่แสดงการไล่ระดับสีเชิงเส้นที่วาดตามเส้นที่กำหนดโดยพิกัดที่แสดงโดยอาร์กิวเมนต์ อาร์กิวเมนต์ทั้งสี่แสดงถึงจุดเริ่มต้น (x1,y1) และจุดสิ้นสุด (x2,y2) ของการไล่ระดับสี
createLinearGradient(x0, y0, x1, y1)
นี่คือค่าพารามิเตอร์ของเมธอด createLinearGradient() -
| S.No | พารามิเตอร์ &คำอธิบาย |
|---|---|
| 1 | x0 พิกัด x- จุดเริ่มต้นของการไล่ระดับสี |
| 2 | y0 พิกัด y - จุดเริ่มต้นของการไล่ระดับสี |
| 3 | x1 พิกัด x - จุดสิ้นสุดของการไล่ระดับสี |
| 4 | y1 พิกัด y - จุดสิ้นสุดของการไล่ระดับสี |
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีวาดการไล่ระดับสีเชิงเส้นใน HTML5 -
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Linear Gradient</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px
solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
linegrd.addColorStop(0.5, "#E44D26");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(50, 80, 300, 100);
</script>
</body>
</html> 