<!DOCTYPE HTML>
<body>
<canvas id = "myCanvas" style="width:200px;height:200px;border:2px solid"></canvas>
<script type="text/javascript">
var obj = document.getElementById("myCanvas");
var cxt = obj.getContext("2d");
<!-- createLinearGradient() 方法创建一条线性颜色渐变 -- >
<!-- createLinearGradient(xStart, yStart, xEnd, yEnd) -->
var grd=cxt.createLinearGradient(0,0,200,200);
<!-- addColorStop(offset, color) 方法在渐变中的某一点添加一个颜色变化 -->
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#0000FF");
cxt.fillStyle=grd;
cxt.fillRect(0,0,200,200);
</script>
</body>