setStrokeColor(color) 设置画布画笔线条颜色

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

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

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

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

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

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

画布画笔线条默认颜色为 black 黑色。

示例代码

示例代码：不同颜色平行线 在横轴方向画两条平行线。直接画出其中一条。指定新的画笔线条颜色后后画出另一条。


// Draw two parallel lines in different colors.
createCanvas("canvas1");
line(120, 50, 200, 50);
setStrokeColor("red");
line(120, 75, 200, 75);

示例代码：简单图形 设置不同画笔颜色，画简单线条。


// 设置不同画笔颜色，画简单线条。
createCanvas("canvas1", 320, 480);
setStrokeWidth(3);
setStrokeColor("purple");
circle(160, 60, 40);
line(160, 100, 160, 260);
line(160, 260, 220, 420);
line(160, 260, 100, 420);
line(40, 130, 280, 130);
setStrokeColor("green");
setStrokeWidth(10);
line(0, 425, 320, 425);

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


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

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

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

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

语法规则


setStrokeColor(color)

参数说明

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

返回值

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

提示说明

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

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

返回文档首页