HTML5漸變代碼

漸變是HTML5中的一個重要功能，它可以讓你創建出令人驚嘆的效果。以下是一些HTML5漸變代碼的示例。

線性漸變

線性漸變可以沿著一條直線進行漸變。以下是一個簡單的線性漸變樣例：

<canvas id="linearGradient"></canvas>
<script>
var canvas = document.getElementById("linearGradient");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
</script>

徑向漸變

徑向漸變從一個中心點開始向外擴散。以下是一個簡單的徑向漸變樣例：

<canvas id="radialGradient"></canvas>
<script>
var canvas = document.getElementById("radialGradient");
var context = canvas.getContext("2d");
var gradient = context.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
</script>

重復漸變

重復漸變可以創建一個平鋪的效果。以下是一個簡單的重復漸變樣例：

<canvas id="repeatingGradient"></canvas>
<script>
var canvas = document.getElementById("repeatingGradient");
var context = canvas.getContext("2d");
var pattern = context.createPattern(document.getElementById("pattern"), "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, canvas.width/2, canvas.height/2);
</script>

總結

HTML5漸變是一項令人驚嘆的技術。這篇文章介紹了線性漸變、徑向漸變和重復漸變的示例代碼。我們希望這些例子能夠幫助您更好地理解和應用HTML5漸變。