Canvas createLinearGradient() วิธี

คู่มือ Canvas

กำหนดและวิธีใช้

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

ตัวอย่าง

ดูเพิ่มเติมที่

กำหนดตัวเรียงสีจากดำไปสีขาว (จากซ้ายไปขวา) ในรูปสี่เหลี่ยมในรูป

เบราเซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

ลองทดสอบด้วยตัวเอง

ภาษาการเขียน

context.createLinearGradient(x0,y0,x1,y1);

ค่าตัวแปร

ตัวแปร รายละเอียด
x0 ตำแหน่งจุดเริ่มต้นของตัวเรียงสีแบบยิ่งตัดทางด้าน X
y0 ตำแหน่งจุดเริ่มต้นของตัวเรียงสีแบบยิ่งตัดทางด้าน Y
x1 ตำแหน่งจุดสิ้นสุดของตัวเรียงสีแบบยิ่งตัดทางด้าน X
y1 ตำแหน่งจุดสิ้นสุดของตัวเรียงสีแบบยิ่งตัดทางด้าน Y

ตัวอย่างเพิ่มเติม

ตัวอย่างที่ 2

กำหนดตัวเรียงสีจากบนไปลงของสี่เหลี่ยมในรูป

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

ลองทดสอบด้วยตัวเอง

ตัวอย่างที่ 3

กำหนดตัวเรียงสีจากดำไปสีแดงและสีขาวเป็นสีที่ทับทิ้งมาตรฐานของสี่เหลี่ยมในรูป

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

ลองทดสอบด้วยตัวเอง

การสนับสนุนของเบราเซอร์

ตัวเลขในตารางชี้แจงสูตรฯ การใช้งานของเบราเซอร์ที่สนับสนุนอบติดทุกอย่าง

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