网页设计作业中绘制渐变图形_学生网页设计制作作业_网页制作作业成品_网页设计作业_计算机毕业设计_php作业_asp作业_网页模板

热点资讯更多

网页设计作业中绘制渐变图形

我们在制作网页设计作业时，绘制渐变图形是必须的，下面是对绘制渐变图形的介绍

绘制线性渐变
渐变的概念：渐变是指在填充时从一种颜色慢慢过渡到另外一种的颜色。
绘制线性渐变时，需要使用到LinearGradient对象。使用图像上下文对象的createLinearGradient方法创建该对象。该方法的定义如下所示。
context.createLinearGradient(xStart,yStart,xEnd,yEnd)
该方法使用四个参数，xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变结束地点的纵坐标。

使用addColorStop方法绘制颜色
创建了一个使用两个坐标点的LinearGradient对象之后，使用addColorStop方法进行绘制颜色，该方法的定义如下所示。
context. addColorStop(offset,color)
该方法使用两个参数——offset和color。Offset为所设定的颜色离开渐变起始点的偏移量。该参数的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。

绘制径向渐变
径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。譬如在绘制太阳时，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变使用图形上下文对象的createLinearGradient方法绘制径向渐变，该方法的定义如下所示。
context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
该方法使用六个参数，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标, yEnd 为渐变结束圆纵的坐标，radiusEnd为结束圆的半径。在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。在设定颜色时，与线性渐变相同，使用的是addColorStop方法进行设定。同样是需要设定0到1之间的浮点数来作为渐变转折点的偏移量。

上一篇：网页设计作业中的样式与颜色

下一篇：网页设计作业中绘制变形图形

分享到： QQ空间新浪微博腾讯微博人人网更多