网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
网络营销,淘宝培训课程优惠
线性渐变和径向渐变《HTML5系列教程19》

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

体彩福建22选5开奖结果:线性渐变和径向渐变《HTML5系列教程19》

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

福建31选7开奖时间 www.tzh2.cn     渐变在我们的日常生活中是一种随处可见的非常普遍的一种视角形象。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的当前渐变对象,最后绘制一个渐变图形,完成径向渐变的绘制?;嬷凭断蚪ケ涞氖纠肴缤妓荆?/P>HTML5中径向渐变的绘制代码示例

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

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


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

      友情链接

  1. 办公文秘
  2. 美术培训
  3. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. site map

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

福建31选7开奖时间
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-06-25
  • 海南省习近平新时代中国特色社会主义思想学习研究中心(第二批)招标公告 2019-06-25
  • 网友给包头市委书记留言获回复 共计8条 2019-06-23
  • Jeep推3款车型搭载国VI发动机 新增多项配置 2019-06-21
  • 李易峰观影两度感动落泪 2019-06-21
  • 卓别林回顾展:在他身上,你看到了多少自己的影子? 2019-06-19
  • 从经济数据看民生获得感 2019-06-15
  • 中国智能手机在东南亚受追捧 2019-06-12
  • 房企发债频现中止 行业集中度料提升 ——凤凰网房产北京 2019-06-11
  • 路上安全  警钟长鸣:宝马SUV闯红灯  十字路口被面包车顶翻 2019-06-11
  • 紫光阁中共中央国家机关工作委员会 2019-06-09
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2019-06-09
  • 宝宝鼻子不通气怎么办 通气好方法都在这! 2019-06-04
  • 探寻深圳的创新基因(壮阔东方潮 奋进新时代·庆祝改革开放40年) 2019-05-28
  • 遏制互联网恶性竞争,条款是否越细越好 2019-05-28
  • 2019最时尚的微信图片 360排列三走势图 【急速赛车游戏机】 青海快三今天开奖预测 大乐透走势图搜狐网 平特三尾 淘宝快3那里玩 广东快乐10分破解 云南快乐10分钟开奖 最近体彩p3试机号 新疆25选7历史开奖 篮球让分胜负加时算吗 彩票店能买幸运飞艇吗 广东体育彩票快乐10分 必中平特一肖图片