Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5520047
  • 博文数量: 763
  • 博客积分: 12108
  • 博客等级: 上将
  • 技术积分: 15717
  • 用 户 组: 普通用户
  • 注册时间: 2007-09-28 21:21
个人简介

业精于勤,荒于嬉

文章分类

全部博文(763)

文章存档

2018年(6)

2017年(15)

2016年(2)

2015年(31)

2014年(14)

2013年(87)

2012年(75)

2011年(94)

2010年(190)

2009年(38)

2008年(183)

2007年(28)

分类: 系统运维

2011-07-05 12:22:16

除了 CSS 颜色, fillStyle和 strokeStyle 属性可以设置为 CanvasGradient 对象。——通过 CanvasGradient可以为线条和填充使用颜色渐变。欲创建 CanvasGradient对象,可以使用两个方法:createLinearGradient 和 createRadialGradient。前者创建线性颜色渐变,后者创建圆形颜色渐变。创建颜色渐变对象后,可以使用对象的 addColorStop方法添加颜色中间值。下面的代码演示了颜色渐变使用方法:
复制内容到剪贴板

  • // You need to provide the source 和 destination (x,y) coordinates     
  • // for the gradient (from where it starts 和 where it ends).   
  • var gradient1 = context.createLinearGradient(sx, sy, dx, dy);   
  • // Now you can add colors in your gradient.   
  • // The first argument tells the position for the color in your gradient. The     
  • // accepted value range is from 0 (gradient start) to 1 (gradient end).   
  • // The second argument tells the color you want, using the CSS color format.   
  • gradient1.addColorStop(0,   ’#f00′); // red   
  • gradient1.addColorStop(0.5, ‘#ff0′); // yellow   
  • gradient1.addColorStop(1,   ’#00f’); // blue   
  • // For the radial gradient you also need to provide source   
  • // 和 destination circle radius.   
  • // The (x,y) coordinates define the circle center points (start 和     
  • // destination).   
  • var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);   
  • // Adding colors to a radial gradient is the same as adding colors to linear     
  • // gradients.   
阅读(3810) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~