最终结果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
canvas {
background: #ddd;
}
</style>
</head>
<body>
<h3>使用渐变对象</h3>
<canvas id="c5" width="500" height="400"></canvas>
<script>
function rn(min, max){ //random number
return Math.floor(Math.random()*(max-min)+min);
}
function rc(min, max){ //random color
var r = rn(min, max);
var g = rn(min, max);
var b = rn(min, max);
return `rgb(${r}, ${g}, ${b})`;
} var ctx = c5.getContext('2d');
for(var i=0; i<4; i++){
var w = 50;
var h = rn(50,300);
var x = (2*i+1)*50;
var y = 50;
//创建渐变对象，并用于填充
var g = ctx.createLinearGradient(x, y, x, y+h);
g.addColorStop(0, rc(0,255));
g.addColorStop(1, '#fff');
ctx.fillStyle = g; //填充一个矩形
ctx.fillRect(x, y, w, h);
} </script>
</body>
</html>