定义从上到下的渐变,作为矩形的填充样式:
<font color=#999AAA >
代码如下(示例):
<!DOCTYPE html>
<html>
<body>
<canvas id="oneCanvas" width="400" height="400" style="border:6px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
var c=document.getElementById("oneCanvas");/* 获取画布*/
var ctx=c.getContext("2d"); /*获取绘图2D环境*/
var my_gradient=ctx.createLinearGradient(0,0,160,70);
/*gradient:渐变对象: 线性渐变,,从上到下, 渐变结束点的xy坐标(x 0,y 0,x 1,y 1) 0:起始 1:终止*/
my_gradient.addColorStop(0,"black"); /*xy坐标的起始位置为黑色*/
my_gradient.addColorStop(0.3,"red");
my_gradient.addColorStop(0.5,"white");
my_gradient.addColorStop(1,"blue"); /*xy坐标的终止位置为蓝色*/
ctx.fillStyle=my_gradient; /*设置或返回用于填充绘画的颜色、渐变或模式*/
ctx.fillRect(20,20,250,200); /*矩形 左上角 x , y 的坐标,宽,高*/
</script>
</body>
</html>