< p >JavaScript 漸變是一種在網頁設計中非常實用的效果，可以通過它來實現動態的色彩過渡，使得頁面內容更加生動形象。漸變效果通常包括線性漸變、徑向漸變、重復漸變以及漸變動畫等多種類型，接下來我們將逐一了解這些漸變類型，并且講解如何在JavaScript中實現它們。< p >1. 線性漸變< pre >var ctx = document.getElementById("canvas").getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);< p >上述代碼實現了一個從紅色到白色的線性漸變，其中ctx.createLinearGradient(0, 0, 200, 0)方法用于創建一個線性漸變對象，并指定了漸變的起始點和結束點的坐標。這里的起始點是 (0,0) ，結束點是 (200,0) ，即漸變的方向為從左到右。< p >2. 徑向漸變< pre >var ctx = document.getElementById("canvas").getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);< p >上述代碼實現了一個從中心向四周放射狀擴散的徑向漸變，其中ctx.createRadialGradient(75, 50, 5, 90, 60, 100)方法用于創建一個徑向漸變對象，并指定了內部圓的圓心坐標和半徑、外部圓的圓心坐標和半徑。這里的起始點是 (75, 50) ，內部圓的半徑是 5 ，結束點是 (90, 60) ，外部圓的半徑是 100 。< p >3. 重復漸變< pre >var ctx = document.getElementById("canvas").getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
var reGrd = ctx.createPattern(document.getElementById("image"), "repeat");
ctx.fillStyle = reGrd;
ctx.fillRect(10, 120, 150, 80);< p >上述代碼中，我們使用了一個重復漸變和一個圖片重復漸變。其中，重復漸變通過設置多個顏色斷點來演示多個顏色的漸變過程。而圖片重復漸變則使用ctx.createPattern()方法，該方法可以將一個HTMLImageElement對象轉化為一個CanvasPattern對象，并且可以用作fillStyle或strokeStyle屬性的參數值。< p >4. 漸變動畫< pre >var ctx = document.getElementById("canvas").getContext("2d");
var color = 0;
var grd = ctx.createLinearGradient(0, 0, 170, 0);
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
function animate() {
setTimeout(function() {
color += 0.1;
if (color >1) {
color = 0;
}
grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "red");
grd.addColorStop(color, "green");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
requestAnimationFrame(animate);
}, 1000 / 60);
}
animate();< p >上述代碼實現了一個線性漸變過渡的動畫效果。通過定時器和requestAnimationFrame()方法的調用，我們可以對漸變對象進行定時更新，從而實現動態的過渡效果。< p >總之，通過JavaScript的漸變效果，我們可以讓網頁內容更加豐富多彩，創造出更具吸引力的用戶體驗。
下一篇css圖片自適應布局