HTML 画布填充和描边
Canvas 填充和描边
要为画布中的形状/对象定义填充颜色和轮廓颜色，我们使用以下属性
| 属性 | 描述 |
|---|---|
fillStyle |
定义对象/形状的填充颜色 |
strokeStyle |
定义对象/形状轮廓的颜色 |
fillStyle 属性
fillStyle 属性定义对象的填充颜色。
fillStyle 属性值可以是颜色（颜色名称、RGB、HEX、HSL）、渐变或图案。
示例
将填充颜色设置为“绿色”，并使用 fillRect() 方法绘制一个填充矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
</script>
自己尝试 »
strokeStyle 属性
strokeStyle 属性定义轮廓的颜色。
strokeStyle 属性值可以是颜色（颜色名称、RGB、HEX、HSL）、渐变或图案。
示例
将轮廓颜色设置为“蓝色”，并使用 strokeRect() 方法绘制一个轮廓矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
自己尝试 »
组合 fillStyle 和 strokeStyle
完全可以将上面两个矩形组合起来。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 填充矩形
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
// 轮廓矩形
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
自己尝试 »
fillStyle 和 strokeStyle 带有 Alpha 通道
您也可以在 fillStyle 和 strokeStyle 属性中添加 Alpha 通道以创建不透明度。
示例
将 fillStyle 和 strokeStyle 属性的不透明度设置为 50%
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 填充矩形
ctx.fillStyle = "rgb(0 255 0 / 50%)";
ctx.fillRect(10,10, 100,100);
// 轮廓矩形
ctx.strokeStyle = "rgb(0 0 255 / 50%)";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
自己尝试 »
