渐变分为：线性渐变和放射性渐变
-
线性渐变如下：
<body>
<canvas id="c1" width="400" height="400">
</canvas>
<script type="text/javascript">
window.onload = function () {
var oC = document.getElementById("c1");
var oGC = oC.getContext("2d");
var grd = oGC.createLinearGradient(150, 100, 250, 200);
grd.addColorStop(0, \'red\');
grd.addColorStop(0.5, \'yellow\');
grd.addColorStop(1, \'blue\');
oGC.fillStyle = grd;
oGC.fillRect(150,100,200,200);
}
</script>
</body>
-
放射性渐变如下：
<body>
<canvas id="c1" width="400" height="400">
</canvas>
<script type="text/javascript">
window.onload = function () {
var oC = document.getElementById("c1");
var oGC = oC.getContext("2d");
var grd = oGC.createRadialGradient(200, 200,100, 200, 200,200);
grd.addColorStop(0, \'red\');
grd.addColorStop(0.5, \'yellow\');
grd.addColorStop(1, \'blue\');
oGC.fillStyle = grd;
oGC.fillRect(0,0,oC.width,oC.height);
}
</script>
</body>