说说在 Canvas 中如何填充形状基本颜色

Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。

（1）颜色字符串名称

context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);

运行结果：

注意：HTML 4.0 只支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

目前还没有 HTML5 专属的颜色名。

以上这些类型的颜色描述值也可以应用到 strokestyle 属性中。

（2）rgb() 方法

利用 rgb() 方法设定 24 位 RGB 值来指定填充颜色。

context.fillStyle = "rgb(255,127,80)";

运行结果：

（3）十六进制数字字符串

也可以使用一个十六进制数字字符串来指定填充颜色。

context.fillStyle = "#6495ED";

运行结果：

（4）rgba( ) 方法

rgba( ) 方法可以指定 32 位色值来指定填充颜色，其后8位表示透明度，a 是 Alpha 的缩写。

context.fillStyle = "rgba(255,127,80,0.5)";

运行结果：

透明度范围为 1( 不透明 ) ~ 0 (完全透明 )，示例代码设置为 0.5，表示半透明。