HTML canvas fillStyle 属性

在 HTML5 中，我们可以使用 <canvas> 元素来绘制图形，动画等。其中，fillStyle 属性用于设置绘制图形时的填充颜色。在本文中，我将详细介绍 fillStyle 属性的用法及示例。

基本语法

fillStyle 属性是 <canvas> 元素的上下文对象（context）的一个属性，用于设置填充颜色。其基本语法如下：

context.fillStyle = color;

其中，color 可以是以下几种形式之一：

• 颜色名称，如 "red", "blue", "green" 等
• 十六进制颜色值，如 #FF0000, #00FF00, #0000FF 等
• RGB 颜色值，如 rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) 等
• RGBA 颜色值，如 rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5) 等

示例

下面是一个简单的示例，演示如何在 canvas 中绘制一个填充颜色为红色的矩形：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // 设置填充颜色为红色
    ctx.fillStyle = "red";
    
    // 绘制一个矩形
    ctx.fillRect(10, 10, 50, 50);
</script>

在这个示例中，我们首先获取了 <canvas> 元素和其上下文对象 ctx，然后设置 fillStyle 属性为 "red"，最后使用 fillRect 方法绘制了一个填充颜色为红色的矩形。

渐变填充

除了纯色填充，我们还可以使用渐变填充来美化图形。以下是一个线性渐变填充的示例：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // 创建线性渐变
    var gradient = ctx.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(1, "blue");
    
    // 设置填充样式为渐变
    ctx.fillStyle = gradient;
    
    // 绘制一个矩形
    ctx.fillRect(10, 10, 50, 50);
</script>

在这个示例中，我们首先使用 createLinearGradient 方法创建了一个线性渐变对象 gradient，然后通过 addColorStop 方法添加了两个颜色停止点，最后将 fillStyle 属性设置为 gradient，实现了一个从红色到蓝色的线性渐变填充效果。

总结

通过本文的介绍，你应该已经了解了 fillStyle 属性的基本用法以及如何实现纯色填充和渐变填充。希望这些知识可以帮助你更好地使用 HTML5 <canvas> 元素进行前端开发。如果你有任何疑问或建议，欢迎在下方留言讨论。谢谢阅读！