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,表示半透明。