渐变，扇形渐变，纹理填充）
1 不透明度
1.1 颜⾊英⽂名
⽰例：
color:'red'
1.2 ⼗六进制格式
有两种表⽰⽅式。
第⼀种为#+6位⼗六进制数，前2位表⽰红⾊，中间2位表⽰绿⾊，后2位表⽰蓝⾊。
第⼆种为#+3位⼗六进制数，第1位表⽰红⾊，第2位表⽰绿⾊，第3位表⽰蓝⾊。
⽰例：
消费税暂行条例
color:"#ccc",
color:"#cccccc"
1.3 rgb
rgb()⽅法的第2个参数表⽰红⾊，第2个参数表⽰绿⾊，第3个参数表⽰蓝⾊。
color:'rgb(128, 128, 128)'
2 rgba（透明度）
rgb()⽅法的第2个参数表⽰红⾊，第2个参数表⽰绿⾊，第3个参数表⽰蓝⾊，第4个参数表⽰透明度，1为不透明，0表⽰透明。
color:'rgba(128, 128, 128,1)'
3 线性渐变
3.1 LinearGradient
color: [ //仪表盘背景颜⾊渐变
[1,aphic.LinearGradient(0, 0, 1, 0,
[
{
offset: 0.1,
color: "#fd2100"
},
{
offset: 0.6,
color: "#d09f00"
},
{
offset: 1,
color: "#26fd00"
}
]);
]
],
3.2 linear
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分⽐，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置color: { type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
网络营销理论offset: 0, color: 'red' // 0% 处的颜⾊
}, {
offset: 1, color: 'blue' // 100% 处的颜⾊
}],
global: false // 缺省为 false
三星p2250w
}
4 径向渐变
4.1 RadialGradient
color:aphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
4.2 radial
皖南医学院学报
// 径向渐变，前三个参数分别是圆⼼ x, y 和半径，取值同线性渐变color: {
type: 'radial',
心游
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜⾊
}, {
offset: 1, color: 'blue' // 100% 处的颜⾊
}],
global: false // 缺省为 false
}
5 扇形渐变
⽰例：
color: [
[0.1, 'red'],
[0.3, aphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'red'
}, {
offset: 0.8,
color: 'rgb(235,205,6)'
}]
尺度
)
],
[0.7, 'rgb(235,205,6)'],
[0.9, aphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(13,211,97)'
}, {
offset: 0.6,
color: 'rgb(235,205,6)'
}]
)
],
[1, 'rgb(13,211,97)']
],
效果图：
6 纹理填充
// 纹理填充
color: {
image: ElementById('bg_img'), // ⽀持为 HTMLImageElement, HTMLCanvasElement，不⽀持路径字符串 repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
<img src="bg.png" id="bg_img" />
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议