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

這篇文章主要介紹css如何在畫布形狀中填充顏色，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

您也可以使用fillStyle()方法在畫布形狀中填充顏色。

以下示例將向您展示如何在矩形形狀內(nèi)填充純色。

例試試這個代碼»

<script>

window.onload = function() {

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

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

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

        context.fillStyle = "#FB8B89";

        context.fill();

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

    };

</script>

提示：在畫布上設(shè)置形狀的樣式時，建議在fill()方法之前使用stroke()方法，以正確渲染筆觸。

同樣，您也可以使用該fillStyle()方法在圓內(nèi)填充純色。

例試試這個代碼&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);

        context.fillStyle = "#FB8B89";

        context.fill();

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

    };

</script>

以上是“css如何在畫布形狀中填充顏色”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！