setFillColor(color) 设置画布画笔填充颜色

功能分类： Canvas Applab JavaScript 少儿编程

设置当前激活画布的画笔填充颜色为指定的 color 值。

使用这个方法来设置画笔填充颜色时只对当前激活画布有效。画笔填充颜色会影响以下操作结果：rect() 以及 circle()。即画笔线条颜色会影响矩形以及圆内部的填充颜色。设置画笔填充颜色时，之前所画图形将不受影响。

在画圆及矩形时，画笔填充颜色影响的是图形内部的填充颜色。圆或矩形线条颜色使用 setStrokeColor() 方法来设置。

指定的 color 参数必须是字符串类型。参数值可以是：

  • 颜色名称
  • 以 # 开头的 16 进制颜色编码
  • 颜色的 rgb 格式值
  • 颜色的 rgba 格式值

画布默认填充颜色为 transparent 透明颜色。

示例代码

示例代码：画圆 设置填充颜色并画一个圆。


// 设置填充颜色并画一个圆
createCanvas("canvas1");
setFillColor("yellow");
circle(160, 240, 100);

示例代码：画哭脸 指定画笔填充颜色，画一张哭脸图形。


// 指定画笔填充颜色，画一张哭脸图形
createCanvas("canvas1");
setFillColor("yellow");
circle(160, 240, 100);
setFillColor("black");
circle(125, 215, 20);
circle(195, 215, 20);
setFillColor("white");
rect(100, 260, 120, 20);

示例代码：指定颜色 演示指定 color 参数的四种方法。


// 指定颜色名称
createCanvas("canvas1");
// Sets the color using the name of a color in a string.
setFillColor("chartreuse");
circle(50, 50, 40);

// 指定颜色 16 进制编码
setFillColor("#7fff00");
circle(100, 50, 40);

// 指定 RGB 颜色
setFillColor("rgb(127, 255, 0)");
circle(50, 100, 40);

// 指定 RGBA 颜色
// RGBA 中的 A 为透明度，范围 0.0 到 1.0
setFillColor("rgba(127, 255, 0, 0.5)");
circle(100, 100, 40);

语法规则


setFillColor(color)

参数说明

名称 类型 必需 参数描述
color String Yes 指定画笔填充颜色。

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

  • 使用这个方法之前，需要确保屏幕上 canvas 画布已被创建，你可以在 Applab 里的 设计 模式里创建画布，或在代码里使用 createCanvas() 方法创建画布。
  • setFillColor() 方法只影响当前激活画布。如果 APP 应用中使用了多个画布，可以指定每个画布上不同的画笔填充颜色。
  • 画笔填充颜色为 "transparent" 透明时，填充内容将不可见。
  • 可以在这里查询可以设置的颜色值：HTML named colors。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页