css如何在畫布形狀中填充漸變色

這篇文章將為大家詳細講解有關css如何在畫布形狀中填充漸變色，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

您也可以在畫布形狀內填充漸變色。漸變只是從一種顏色到另一種顏色的平滑視覺過渡。有兩種類型的漸變可用：線性漸變和徑向漸變。

創建線性漸變的基本語法可以通過以下方式給出：

var grd = context.createLinearGradient（startX，startY，endX，endY）;

下面的示例使用該createLinearGradient()方法在矩形內部填充線性漸變顏色。讓我們嘗試一下，以了解其基本工作原理：

例試試這個代碼»

<script>

window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

        context.rect(50, 50, 200, 100); 

        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);

        grd.addColorStop(0, '#8ED6FF');   

        grd.addColorStop(1, '#004CB3');

        context.fillStyle = grd;

        context.fill();

        context.stroke();

    };

</script>

同樣，您可以使用createRadialGradient()方法使用徑向漸變填充畫布形狀。創建徑向漸變的基本語法可以通過以下方式給出：

var grd = context.createRadialGradient（startX，startY，startRadius，endX，endY，endRadius）;

以下示例使用該createRadialGradient()方法在圓內填充徑向漸變顏色。讓我們嘗試一下以了解其實際工作原理：

例試試這個代碼&raquo;

<script>

window.onload = function() {

        var canvas = document.getElementById("myCanvas");

        var context = canvas.getContext("2d");

        context.arc(150, 100, 70, 0, 2 * Math.PI, false);

        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);

        grd.addColorStop(0, '#8ED6FF');   

        grd.addColorStop(1, '#004CB3');

        context.fillStyle = grd;

        context.fill();

        context.stroke();

    };

</script>

關于“css如何在畫布形狀中填充漸變色”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。