context.fillRect(0,550,800,25);
}
</script>
</body>
</html>
运行结果：
这两个页面都是水平渐变，但是要清楚线性渐变不一定是水平的，方向可以是任意的，通过渐变线的端点来设置方向。
径向渐变
同样是三步走战略，只不过是第一步的所用方法变了。
添加渐变圆：
- var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
为渐变线添加关键色(类似于颜色断点)：
- grd.addColorStop(stop,color);
应用渐变：
- context.fillStyle = grd;
context.strokeStyle = grd;
线性渐变是基于两个端点定义的，但是径向渐变是基于两个圆定义的。
我们把示例7-2改写一下。
- <!DOCTYPE html>
<html lang="zh">
- <head>
<meta charset="UTF-8">
- <title>填充径向渐变</title>
</head>
- <body>
<div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
- </canvas>
</div>
-
<script>
- window.onload = function(){
var canvas = document.getElementById("canvas");
- canvas.width = 800;
canvas.height = 600;
