如何用HTML5实现界面的径向渐变效果

径向渐变就是从起点到终点颜色从内到外进行圆形渐变(从内圆到外圆不断变化的效果),使用径向渐变可以实现一些网页漂亮的界面特效如按钮,导航图片等

操作方法

  • 01

    在网页主体中定义一张画布(大小,颜色等),在HTML5输入JS代码,加载网页,并定义一只画笔如图

  • 02

    运行程序,如图

  • 03

    定义一个变量grd,在画布中心为150,起点为0,半径为20,终点为200的地方,创建一个径向效果,如图

  • 04

    在起点为0的地方设置径向渐变为“#000”

  • 05

    在0.1处的地方设置径向渐变为“white”

  • 06

    在0.2处的地方设置径向渐变为“#eee”

  • 07

    在0.3处的地方设置径向渐变为“drakgray”

  • 08

    填充径向渐变效果,在起点为0,终点为800的地方坐图,效果如图

  • 09

    运行程序,如图完成!再加上颜色就好了!(是不是有一双眼睛在盯着你)

(0)

相关推荐

  • 如何用HTML5制作进度条方法教程

    进度条是指网络上文件.上传下载与浏览网页的可视化显示条.用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧 操作方法 01 先在<bod ...

  • 如何用HTML5向网页中插入音频

    我们进行网页开发的时候,经常需要在网页中插入音频.运用HTML4的技术很难实现这个需求.而用HTML5去实现插入音频的功能却很简单方便.下面小编通过实例给大家讲解一下. 操作方法 01 打开Subli ...

  • 如何用HTML5建企业网站?

    一般的企业要用HTML5建企业网站,实现起来实在是太困难了,即使在这里给大家码一堆源码也未必看得懂.找建站公司吧,因为对技术不了解,也不知道HTML5能实现什么样的功能,交流起来十分困难,一般流程下来 ...

  • 如何用HTML5制作阴影文字?

    HTML5除了兼容以往HTML版本的标签以外,还给我们提供了许多功能,比如绘画和文字处理.以往在PS中处理的图片和文字效果,用h5也能实现,下面就让我们一起来学习如何在h5中制作阴影文字,并在网页中输 ...

  • 如何用HTML5实现鼠标经过时改变图片颜色?

    我们在浏览网页时,当鼠标划过某一物体,就会发现,图片和文字与原图变了样,这是为什么?那是因为我们为CSS样式加了伪类:如(当鼠标经过时,背景颜色改为红色,字体变为白色等,常见伪类主要有: link:用 ...

  • 怎样用Photoshop CS5创建渐变效果?

    怎样用Photoshop CS5创建渐变效果?下面介绍 5种基本渐变工具:线性渐变工具.径向渐变工具.角度渐变工具.对称渐变工具.菱形渐变工具的用法. 操作方法 01 线性渐变工具的用法.双击线性渐变 ...

  • 实例讲解Flash如何绘制白萝卜卡通图案

    Flash是专门用来绘制动画的软件工具,具有"简单.容易"等优点.现在,我们来看看如何使用Flash来绘制白萝卜卡通图案吧. 操作方法 01 新建文档 双击桌面上的Flash图标, ...

  • ps如何制作炫光线效果

    ps是一款功能强大的平面设计软件,使用该软件我们不仅可以进行图片编辑与合成,也可以制作图片效果,下面我们就来看看使用该软件如何制作炫光线效果,其效果如图所示: 操作方法 01 在桌面上找到ps的快捷图 ...

  • AI绘制精美圣诞花环教程

    叮叮当-叮叮当-铃儿响叮当-一转眼很快又是一年一度的圣诞节了,大家开始忙着准备平安果喝圣诞礼物吧,而每到这个时候设计师们也要忙着准备各种素材,各种banner,也是忙的焦头烂额.今天就给大家带来一个圣 ...