文件名：drawing6.html。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>繪製6</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d");
pt1 = {x:100,y:100},
pt2 = {x:300,y:300},
gradient = context.createLinearGradient(pt1.x , pt1.y , pt2.x , pt2.y);
gradient.addColorStop(0,"#f00");
gradient.addColorStop(0.5,"#ff0");
gradient.addColorStop(1,"rgba(255,0,0,0)");
context.fillStyle = gradient;
context.fillRect(100,100,200,200);//繪製矩形（起點座標和長寬）
}
</script>
</body>
</html>效果圖：
參見《HTML5+Javascript動畫基礎》。