sidebar: canvas_CanvasContext-setFillStyle

title: CanvasContext.setFillStyle header: develop nav: api

sidebar: canvas_CanvasContext-setFillStyle

解释：设置填充色。

方法参数

Color color

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

:::codeTab

const canvasContext = this.createCanvasContext('myCanvas');
canvasContext.setFillStyle('blue');
canvasContext.fillRect(30, 30, 150, 75);
canvasContext.draw();

:::

代码示例 - 使用十六进制函数

在开发者工具中预览效果

:::codeTab

const canvasContext = this.createCanvasContext('myCanvas');
canvasContext.setFillStyle('#ffff00');
canvasContext.fillRect(30, 30, 150, 75);
canvasContext.draw();

:::

代码示例 - 使用rgba()函数

在开发者工具中预览效果

:::codeTab

const canvasContext = this.createCanvasContext('myCanvas');
const lineRGB = '255,255,0';
const opacity = 0.3;
canvasContext.setFillStyle(`rgba(${lineRGB}, ${opacity})`);
canvasContext.fillRect(30, 30, 150, 75);
canvasContext.draw();

:::