<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas">
</canvas>
</body>
</html>
<script type="text/javascript">
/*
fillStyle 不仅可以填充颜色还可以填充渐变色
var grd = context.createLinderGradident(x,start,ystart,xend,yend);
grd.addColorStop(stop,color);
*/
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext('2d');
var grd = context.createLinearGradient(400,800,400,0);
grd.addColorStop(0.0,'#fff');
grd.addColorStop(1.0,'#000');
context.fillStyle = grd;
context.fillRect(0,0,800,800);
</script>
