HTML5中的Canvas(线性渐变)

By | 2012/01/31

这一章讲解Canvas绘图中的线性渐变,不过呢,渐变的处理在各种浏览器中还略有不同,我们也会就这方面做一些说明。

什么是线性渐变

所谓线性渐变,是指从开始地点到结束地点,颜色呈直线的徐徐变化的效果。为了实现这种效果,我们绘制时必须制定开始和结束的颜色。而在Canvas中,不仅可以只指定开始和结尾的两点,中途的位置也能任意指定,所以可以实现各种奇妙的效果。

为了绘制线性渐变,我们需要使用createLinearGradient命令,这个命令可以获得一个CanvasGradient对象,使用这个对象的addColorStop方法添加颜色,就可以了。

CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1)
    渐变的开始地点(x0, y0),结束地点(x1, y1)指定后,返回线性渐变对象CanvasGradient。
    然后我们通过addColorStop方法,offset为0的地方为开始地点的颜色,offset为1的则为结束地点的颜色。另外,很明显的,x0=x1并且y0=y1的时候,不会有渐变效果出现。

CanvasGradient.addColorStop(offset, color)
    这个方法就是增加点的颜色,如果offset大于1或者小于0,会发生INDEX_SIZE_ERR异常;color可以是任何合法的CSS颜色,如果不是,则会发生SYNTAX_ERR异常。
    如果offset是指定0到1之间的值,则是对应中间的比例位置。

整个的使用方法,首先是利用createLinearGradient方法指定渐变的首末位置得到CanvasGradient对象,再对这个对象使用addColorStop方法指定各个位置的颜色。最后,将CanvasGradient对象作为fillStyle使用。当然如果是希望框线使用渐变,就将其设置到strokeStyle上去。

纵方向的线性渐变

我们来看一个具体的例子:

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  /* 指定渐变区域 */
  var grad  = ctx.createLinearGradient(0,0, 0,140);
  /* 指定几个颜色 */
  grad.addColorStop(0,'rgb(192, 80, 77)');    // 红
  grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 绿
  grad.addColorStop(1,'rgb(128, 100, 162)');  // 紫
  /* 将这个渐变设置为fillStyle */
  ctx.fillStyle = grad;
  /* 绘制矩形 */
  ctx.rect(0,0, 140,140);
  ctx.fill();
  // ctx.fillRect(0,0, 140,140);
}

画完以后是这个结果:
水平线性渐变代码中的各个定义也很清楚,因为(0, 0, 0, 140)指定了一条垂直的线,所以最终效果是垂直的进行渐变,这个效果在各种浏览器中应该都是一样的。我们以前说到过,画矩形有个简便的fillRect方法,这个方法是rect方法和fill方法的组合,非常方便。这里之所以没有采用,是因为貌似在低版本的Safari下有问题(无视渐变的fillStyle,只用默认的颜色),但在最新(现在是5.2)版本下尝试过没问题了,估计很早就修复了,也就放心用吧。

水平方向的线性渐变

有了上面的基础,这个就非常简单了,只需要修改一句话就好了:

var grad = ctx.createLinearGradient(0,0, 140,0);

实际的效果可想而知,如图所示。垂直线性渐变

倾斜的线性渐变

有了垂直方向和水平方向,也就一个倾斜的可以玩玩了,和上面一样,只是指定一下方向就可以了:

var grad = ctx.createLinearGradient(0, 0, 140, 140);

还需要进一步说明么?如图所示。倾斜线性渐变
这次的三个图可以在这里看到
下一次讲解HTML5中的Canvas(径向渐变)

3 thoughts on “HTML5中的Canvas(线性渐变)

发表评论

您的电子邮箱地址不会被公开。