1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<body>
<canvas id="canvas" width="500" height="100"></canvas>
<svg width="0", height="0">
<defs>
<filter color-interpolation-filters='sRGB' id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter color-interpolation-filters='sRGB' id="Table">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 2 0.5 1"/>
<feFuncG type="table" tableValues="1 -1 5 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter color-interpolation-filters='sRGB' id="Discrete">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 2 0.5 1"/>
<feFuncG type="discrete" tableValues="1 -1 5 0"/>
<feFuncB type="discrete" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter color-interpolation-filters='sRGB' id="Linear">
<feComponentTransfer>
<feFuncR type="linear" slope=".5" intercept=".25"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="-0.5" intercept=".5"/>
</feComponentTransfer>
</filter>
<filter color-interpolation-filters='sRGB' id="Gamma">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="-0.5"/>
<feFuncG type="gamma" amplitude="0.9" exponent="3" offset="0.3"/>
<feFuncB type="gamma" amplitude="1.1" exponent="1" offset="0.1"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
</body>
<script type="text/javascript">
const ctx = document.getElementById("canvas").getContext("2d");
const grad = ctx.createLinearGradient(10, 0, 490, 0);
grad.addColorStop(0, "#f00");
grad.addColorStop(0.33, "#0f0");
grad.addColorStop(0.67, "#00f");
grad.addColorStop(1, "#000");
ctx.fillStyle = grad;
ctx.filter = "url('#Identity')";
ctx.fillRect(10, 10, 480, 10);
ctx.filter = "url('#Table')";
ctx.fillRect(10, 30, 480, 10);
ctx.filter = "url('#Discrete')";
ctx.fillRect(10, 50, 480, 10);
ctx.filter = "url('#Linear')";
ctx.fillRect(10, 70, 480, 10);
ctx.filter = "url('#Gamma')";
ctx.fillRect(10, 90, 480, 10);
</script>
|
