HTML5资源,HTML5学习,HTML5文档,HTML5资料,HTML5教程,HTML5游戏,HTML5案例

html5 canvas 渐变

 canvas loading...

渐变是指在颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤:

(1) 创建渐变对象;

(2) 为渐变对象设置颜色,指明过渡方式;

(3) 在context上为填充样式或者描边样式设置渐变。

可以将渐变看做是颜色沿着一条线进行缓慢地变化。例如,如果为渐变对象提供了A、B两个点,不论是绘制还是填充,只要从A移动到B,都会带来颜色的变化。

要设置显示哪种颜色,在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数:颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值,代表沿着渐变线渐变的距离有多远。

假如要建立一个从点(0,0)到点(0,100)的渐变,并指定在0.0偏移位置使用白色,在1.0偏移位置使用黑色。当使用绘制或者填充的动作从(0,0)画到(0,100)后,就可以看到颜色从白色(起始位置)渐渐转变成了黑色(终止位置)。

除了可以变换成其他颜色外,还可以为颜色设置alpha值(例如透明),并且alpha值也是可以变化的。为了达到这样的效果,需要使用颜色值的另一种表示方法,例如内置alpha组件的CSS rgba函数。

下面我们通过示例来详细了解如何使用两个渐变来填充(相应的函数为fillRect)矩形区域,并形成最终的树干,见代码清单2-16。

代码清单2-16 使用渐变

  1. // 创建用作树干纹理的三阶水平渐变  
  2. var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);  
  3.  
  4. // 树干的左侧边缘是一般程度的棕色  
  5. trunkGradient.addColorStop(0, '#663300');  
  6.  
  7. // 树干中间偏左的位置颜色要淡一些  
  8. trunkGradient.addColorStop(0.4, '#996600');  
  9.  
  10. // 树干右侧边缘的颜色要深一些  
  11. trunkGradient.addColorStop(1, '#552200');  
  12.  
  13. // 使用渐变色填充树干  
  14. context.fillStyle = trunkGradient;  
  15. context.fillRect(-5, -50, 10, 50);  
  16.  
  17. // 接下来,创建垂直渐变,以用作树冠在树干上投影  
  18. var canopyShadow = context.createLinearGradient(0, -50, 0, 0);  
  19.  
  20. // 投影渐变的起点是透明度设为50%的黑色  
  21. canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');  
  22.  
  23. // 方向垂直向下,渐变色在很短的距离内迅速渐变至完全透明,
    这段长度之外的树干上没有投影  
  24. canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');  
  25.  
  26. // 在树干上填充投影渐变  
  27. context.fillStyle = canopyShadow;  
  28. context.fillRect(-5, -50, 10, 50); 

除了我们刚才用到的线性渐变以外,HTML5 Canvas API还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的,不过参数如代码清单2-17所示。

代码清单2-17 使用放射性渐变的示例

  1. createRadialGradient(x0, y0, r0, x1, y1, r1) 

代码中,前三个参数代表以(x0,y0)为圆心,r0为半径的圆,后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆。渐变会在两个圆中间的区域出现。

posted on 2012-03-01 16:06  html5实验室  阅读(3367)  评论(0编辑  收藏  举报

导航