实战网络营销、淘宝电商、设计培训教程中心
课程试听
新川教育-专业的网络营销培训机构
三种教学方式任选:面授+在线教育+视频教学.
线性渐变和径向渐变《HTML5系列教程19》

来源:新川教育 阅读数:2178
添加时间:2017-4-29   类别:网页设计教程

线性渐变和径向渐变《HTML5系列教程19》

线性渐变和径向渐变《HTML5系列教程19》

    渐变在我们的日常生活中是一种随处可见的非常普遍的一种视角形象。Canvas为实现渐变效果提供了很好的解决方案。在HTML5中主要有两种渐变方式,一种是沿着直线的渐变方式,另一种是从一个点或圆的半径向四周渐变的方式,我们把这两种方式叫做线性渐变和径向渐变。今天我们主要介绍这两种渐变的绘制方法。


1.线性渐变的绘制方法

    Canvas提供了用于创建线性渐变的函数createLinearGRadient(x0,y0,x1,y1),坐标点是(x0,y0)指定了线性渐变的起点,坐标点(x1,y1)指定了线性渐变的终点,如果这两个坐标点在一条水平线上,那么就会创建水平线性渐变;如果这两个坐标点在一条垂直线上,那么将创建垂直线性渐变;如果这两个坐标点连线是一条倾斜的直线,那么将创建倾斜线性渐变。那么假设现在我们要创建一个宽度为300的水平线性渐变,示例代码如图所示:

HTML5中宽度为300的水平线性渐变的绘制代码

    有了一个渐变对象之后,我们就需要定义渐变的颜色了。在Canvas中使用addColorStop(stop,color)函数来定义渐变的颜色,参数stop表示开始渐变位置占渐变区域的百分比,为0~1之间的任意值,参数color为颜色样式。在实际应用中,至少要添加两种以上颜色才能达到渐变效果。例如要创建从红色到蓝色的渐变,可以使用图中这个示例代码:

HTML5中渐变颜色的定义

    接下来我们需要设置Canvas内容的fillStyle为当前的渐变对象,并且绘制图形,比如一个矩形或一条直线。所以,为了看到渐变效果,我们还需要以下代码:

HTML5中绘制渐变图形

到这里,一个线性渐变的图形就绘制完成了,完整的示例代码如图:

HTML5中绘制红蓝渐变的代码示例

    在谷歌浏览器上预览效果如图:

HTML5中绘制红蓝渐变的效果示例


2.径向渐变的绘制

    径向渐变与线性渐变的实现方式基本类似,在Canvas中使用createRadialGradient(x0,y0,r0,x1,y1,r1)函数创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表圆心为(x0,y0),半径为r0的开始圆,后三个参数代表圆心为(x1,y1),半径为r1的结束圆。创建该对象后,仍需要使用addColorStop函数定义渐变颜色,并设置径向渐变对象为fillStyle的当前渐变对象,最后绘制一个渐变图形,完成径向渐变的绘制。绘制径向渐变的示例代码如图所示:

HTML5中径向渐变的绘制代码示例

    在谷歌浏览器上预览效果如图:

HTML5中径向渐变的绘制效果示例


    还有一点要注意的是在绘制径向渐变时,可能会因为Canvas的宽度或高度设置不合适,导致径向渐变显示不完整,这时候就要考虑跳转Canvas的尺寸了,以便能完整显示径向渐变的效果。这一次线性渐变和径向渐变就是这些了。了解更多丰富资讯和精彩动态,请关注我们的官方微信:pyyuanxing。谢谢大家的观看。祝大家:身体健康、生活愉快!

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 学校图片
  7. 师资介绍
  8. 工作推荐
  1. PS培训
  2. CAD培训
  3. 室内设计
  4. 办公文秘
  5. 美术培训
  6. SEO课程
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6