指定颜色[createjs]

了解如何在CreatJS中指定颜色。有几种方法可以在CreateJS中指定颜色。

• 通过颜色名称指定（例如，绿色，红色，蓝色）
• 以十六进制表示法指定（例如：＃00ff00，＃ff0000，＃0000FF）
• RGB规范（示例：createjs.Graphics.getRGB（255，0，0））
• HSL规范（示例：createjs.Graphics.getHSL（255，0，0））

您选择哪种方法视情况而定。初学者只需记住颜色的名称。颜色名称的变化有限，因此，如果要增加表达的自由度，请使用其他方法。

通过颜色名称指定

var shape = new createjs.Shape();
// 赤い円
shape.graphics.beginFill("red");
shape.graphics.drawCircle(100, 100, 50);
// 緑の円
shape.graphics.beginFill("green");
shape.graphics.drawCircle(200, 100, 50);
// 青い円
shape.graphics.beginFill("blue");
shape.graphics.drawCircle(300, 100, 50);

• 播放样本
• 检查样本源代码

可以使用的颜色名称与CSS表示法相同。您可能要参考以下URL。

• HTML颜色名称

* beginFill()有关如何使用该方法的详细信息，请参阅“ 官方文档（英文） ”。

以十六进制表示法指定

这是用于指定Web生产颜色的最常用方法。#后跟颜色的十六进制数。用Photoshop等软件检查颜色的十六进制数是个好主意。

var shape = new createjs.Shape();
// 赤い円
shape.graphics.beginFill("#ff0000");
shape.graphics.drawCircle(100, 100, 50);
// 緑の円
shape.graphics.beginFill("#00ff00");
shape.graphics.drawCircle(200, 100, 50);
// 青い円
shape.graphics.beginFill("#0000ff");
shape.graphics.drawCircle(300, 100, 50);

• 播放样本
• 检查样本源代码

十六进制表示法的颜色代码应参考以下颜色选择器。通常，网络上可以处理1650万种颜色，但是可以使用颜色选择器根据内容的气氛选择颜色。

• HTML颜色选择器

由HSL指定

您还可以在HSL中指定颜色。指示色相，饱和度和亮度，每一个都在以下范围内指定一个参数：如稍后在“ 使用CreateJS开发HSL颜色 ”中所述，在仅通过编程更改色相时很有用。

• 色相（0-360）
• 饱和度（0％-100％）
• 亮度（0％-100％）

var shape = new createjs.Shape();
// 赤い円
shape.graphics.beginFill("hsl(0, 100%, 100%)");
shape.graphics.drawCircle(100, 100, 50);
// 緑の円
shape.graphics.beginFill("hsl(120, 100%, 100%)");
shape.graphics.drawCircle(200, 100, 50);
// 青い円
shape.graphics.beginFill("hsl(240, 100%, 100%)");
shape.graphics.drawCircle(300, 100, 50);

另外，CreateJS提供了一种createjs.Graphics.getHSL(h, s, l)方法，可以设置hue作为指令。无论使用哪种方法，结果都没有区别，因此您可能需要自己选择。

// 赤い円 (色相, 彩度, 明度)
shape.graphics.beginFill(createjs.Graphics.getHSL(0, 100, 50));
shape.graphics.drawCircle(100, 100, 50);
// 暗い赤い円 (色相, 彩度, 明度)
shape.graphics.beginFill(createjs.Graphics.getHSL(0, 100, 20));
shape.graphics.drawCircle(200, 100, 50);
// 明るい赤い円 (色相, 彩度, 明度)
shape.graphics.beginFill(createjs.Graphics.getHSL(0, 100, 80));
shape.graphics.drawCircle(300, 100, 50);

• 播放样本
• 检查样本源代码

* 有关详细用法，请参阅“ 官方文档（英语） ”。