废话小说，沾待马
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 线性渐变
第一步：
var linearGradient = context.createLinearGradient(30,30,800,800);
参数1：渐变x的开始坐标位置
参数2：渐变y的开始坐标位置
参数3、4：渐变的方向
倾斜渐变；(0,0,800,800)
水平渐变；(0,0,800,0)
垂直渐变；(0,0,0,800)
第二步：
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1：位置的百分比
参数2：渐变的颜色
第三步：
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
说明：第一句的意思是填充的颜色按照上面的设置
注意：如果设置context.createLinearGradient(50,0,300,00);
那么水平方向0-50的区域显示白色； （开始的颜色）
300-800的区域显示黑色 （结束的颜色）
注意：如果设置context.createLinearGradient(0,50,0,500);
那么垂直方向 0-50的区域显示白色；（开始的颜色）
500-800的区域显示黑色 （结束的颜色）
*/
var linearGradient = context.createLinearGradient(0,50,0,500);
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
linearGradient.addColorStop(0.75,'blue');
linearGradient.addColorStop(1.0,'black');
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>