Canvas基础: fillStyle和strokeStyle示例

在前端开发中，HTML5 的 Canvas API 提供了一种强大的方式来在网页上绘制图形。Canvas 的核心特性之一就是它的绘图上下文，其中 fillStyle 和 strokeStyle 属性用于设置图形的填充色和描边色。在这篇文章中，我们将深入探讨这两个属性的使用方法，并通过多个示例来展示它们的实际应用场景。

基本概念与作用

fillStyle

fillStyle 属性决定了图形内部的颜色。它可以接受多种类型的值，包括十六进制颜色代码、RGB/RGBA 字符串、HSL/HSLA 字符串或渐变对象。

strokeStyle

strokeStyle 属性则用于设置图形轮廓的颜色。同样地，它也支持与 fillStyle 相同的值类型。

作用

• 填充颜色：fillStyle 用于填充图形的内部。
• 描边颜色：strokeStyle 用于绘制图形的外部轮廓。
• 视觉效果：通过组合不同的填充和描边颜色，可以创造出丰富的视觉效果。

示例一：基本的填充和描边

代码示例

function drawSimpleShape(ctx) {// 设置填充色ctx.fillStyle = 'red';// 设置描边色ctx.strokeStyle = 'blue';// 开始绘制路径ctx.beginPath();ctx.arc(150, 100, 50, 0, Math.PI * 2, false);ctx.closePath();// 填充圆形ctx.fill();// 描边圆形ctx.stroke();
}// 使用示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');drawSimpleShape(ctx);

说明

在这个示例中，我们绘制了一个红色填充蓝色描边的圆形。fill 方法用于填充图形内部，而 stroke 方法用于绘制图形的轮廓。

示例二：使用RGB/RGBA设置颜色

代码示例

function drawRGBShapes(ctx) {// 设置填充色为半透明红色ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';// 设置描边色为半透明蓝色ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';// 绘制并填充矩形