JavaScript中的ctx.fillStyle介绍

在JavaScript中，我们可以使用canvas元素来创建2D图形的动画效果。而在canvas元素中，ctx.fillStyle属性用于设置填充区域的颜色，它是使用RGB、RGBA、HSL、HSLA、十六进制等方式来设置颜色。

语法

ctx.fillStyle = "color";

参数说明

• color： 要设置的颜色，可以使用RGB、RGBA、HSL、HSLA、十六进制等方式来设置。

例子

以下是一个使用ctx.fillStyle属性设置canvas元素填充颜色的例子：

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

参数值

RGB值

以下是RGB值的例子，其中R表示红色、G表示绿色、B表示蓝色。

ctx.fillStyle = "rgb(255, 0, 0)";

RGBA值

以下是RGBA值的例子，其中A表示透明度，值从0到1取值。

ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

HSL值

以下是HSL值的例子，其中H表示色相、S表示饱和度、L表示亮度。

ctx.fillStyle = "hsl(120, 100%, 50%)";

HSLA值

以下是HSLA值的例子，其中A表示透明度，值从0到1取值。

ctx.fillStyle = "hsla(120, 100%, 50%, 0.5)";

十六进制值

以下是十六进制值的例子，其中RR表示红色、GG表示绿色、BB表示蓝色。

ctx.fillStyle = "#FF0000";

总结

ctx.fillStyle属性是canvas元素中非常基本的属性之一，它用于设置填充区域的颜色。我们可以使用RGBA、RGB、HSLA、HSL、十六进制等方式来设置颜色。使用ctx.fillRect()方法可以填充图形的颜色。