html5渐变的两种方式,HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient...
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂。
不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊。
比如从红色变成黄色,在红与黄之间的那个地方,不会是纯色的红和黄,我一开始不是很明白,现在我是理解的:渐变颜色嘛,字面上的意思,就是渐变,在这两种颜色之间,由一种颜色渐变过渡到另一种颜色。
一、创建渐变颜色对象的步骤蛮简单的,线性渐变比径向渐变少了两个参数而已。具体步骤是这样的:
1、获取到你的canvas画布后,我们需要创建颜色渐变对象 var gradient
2、设置要渐变的颜色带 addColorStop(颜色带的所在点,"颜色")
3、将颜色渐变对象赋值给填充类型 fillStyle
4、进行绘制
ok了!
varmyCanvas=document.getElementById("myCanvas");varcontext=myCanvas.getContext("2d");vargradient=context.createLinearGradient(0,0,myCanvas.width,0);//创建颜色渐变对象
gradient.addColorStop(0,‘blue‘);//设置颜色停止点(过渡颜色所在位置)
gradient.addColorStop(0.25,‘white‘);
gradient.addColorStop(0.5,‘purple‘);
gradient.addColorStop(0.75,‘red‘);
gradient.addColorStop(1.0,‘yellow‘);
context.fillStyle=gradient;//把渐变对象赋值给填充类型
context.fillRect(0,0,myCanvas.width,myCanvas.height);//绘制图形
换个浏览器呗
varmyCanvas2=document.getElementById("myCanvas2");varcontext2=myCanvas2.getContext("2d");//var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height); //创建颜色径向渐变对象
vargradient2=context2.createRadialGradient(myCanvas2.width/2,myCanvas2.height/2,0,myCanvas2.width/2,myCanvas2.height/2,100);//创建颜色径向渐变对象(一个圆从中间向四周径向渐变)
gradient2.addColorStop(0,‘blue‘);//设置颜色停止点(过渡颜色所在位置)
gradient2.addColorStop(0.25,‘white‘);
gradient2.addColorStop(0.5,‘purple‘);
gradient2.addColorStop(0.75,‘red‘);
gradient2.addColorStop(1.0,‘yellow‘);
context2.fillStyle=gradient2;
context2.fillRect(0,0,myCanvas2.width,myCanvas2.height);
两种颜色渐变函数的参数说明:context.createLinearGradient(x0,y0,x1,y1);
参数
描述
x0
渐变开始点的 x 坐标
y0
渐变开始点的 y 坐标
x1
渐变结束点的 x 坐标
y1
渐变结束点的 y 坐标
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数
描述
x0
渐变的开始圆的 x 坐标
y0
渐变的开始圆的 y 坐标
r0
开始圆的半径
x1
渐变的结束圆的 x 坐标
y1
渐变的结束圆的 y 坐标
r1
结束圆的半径
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient()
方法、createRadialGrradient()方法。
注释:Internet Explorer 8 或更早的浏览器不支持 元素。
关于径向渐变,我自己觉得最简单的理解就是:
例如我们要径向渐变一个圆,从圆心往四周颜色渐变,那么圆心所在的那个圆的坐标就是(x1,y1)
r1=0,渐变的大圆的坐标(x2,y2) r2=r(r为圆的半径)。
这是上面径向渐变的代码的效果截图:
从圆心(blue)——>四周(yellow)
原文:http://www.cnblogs.com/wuyinghong/p/3660595.html
html5渐变的两种方式,HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient...相关推荐
- python程序执行的两种方式_012.执行Python程序的两种方式
一.执行Python程序的两种方式 1.1 交互式 在终端内输入python3,然后输入python代码 交互式环境下,敲完一条命令按下enter键马上能看到结果,调试程序方便.程序无法永久保存,关掉 ...
- 创建线程池的四种方式_创建线程到底有几种方式?
很多时候,在项目中使用线程的情况很少,导致很多人只停想起最常见的两种创建线程的方法,即继承Thread类和实现Runnable接口. 而网络上大家有人认为是三种实现方式,也有人认为是四种实现,下面我们 ...
- 返回ajax有几种方式,java ajax返回 Json 的 几种方式
方式 1. : 自写代码转 Json 需要 HttpHttpServletRequest request HttpServletResponse response 后台 : @RequestMap ...
- mysql连接查询分为几种方式_SQL多表查询的几种连接方式
一.基础 1.1 SQL查询的基本原理 第一.单表查询:根据WHERE条件过滤表中的记录,形成中间表(这个中间表对用户是不可见的):然后根据SELECT的选择列选择相应的列进行返回最终结果. 第二.两 ...
- Struts 往jsp页面传值的三种方式 以及获取Jsp页面值得一种方式
//传值的的第一种方式直接在action中getset方法完成值的传递 第一种方法值是放在值栈valuestack中其余两种是放在actioncontext中 this.setName(&quo ...
- Spark任务提交至YARN运行的3种方式与Mapreduce提交任务的几种形式
一: Spark任务提交至YARN运行的3种方式 Spark作为新一代计算平台的闪亮明星,在我们的大数据平台中具有非常重要的作用,SQL查询.流计算和机器学习等场景都能见到它的身影,可以说平台应用的数 ...
- python中函数参数传递的三种方式_python中函数参数传递的几种方法
转自 http://www.douban.com/note/13413855/ Python中函数参数的传递是通过"赋值"来传递的.但这条规则只回答了函数参数传递的"战 ...
- 详解python运行三种方式_详解python运行三种方式
方式一 交互式编程 交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,提示窗口如下: $ p ...
- java获取时间戳有多少种方式,给我写出5种以上示例
Java中获取时间戳的方式有很多种, 以下是几种常用的方法: 使用System.currentTimeMillis()方法: long timestamp= System.currentTimeMil ...
最新文章
- python 创建目录时间_在目录中创建带有日期时间名称和子文件的dir(Python)
- ASP.NET Web下基于Forms的验证
- 计算机组成原理中wr是什么,计算机组成原理复习例题.doc
- [position]返回顶部
- ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码
- [UE4]OnComponentBeginOverlap.AddDynamic 的编译错误
- 今天不是VS2005和SQL 2005在中国的正式发布日期吗?
- 软件对操作系统有要求?操作系统不符合要求你软件就不玩了?
- Python3中Dict不能在循环中删除元素
- java编程思想读后感
- 利用Procexp工具监控Windows平台上的Oracle数据库性能
- 【千本樱】mmd镜头+动作打包下载
- Exponential family: 指数分布族
- 系统技巧:电脑系统盘实用清理方案介绍
- 微信小程序首页加载的优化
- Disallow self-closing on HTML void elements
- 双下划线一粗一细怎么加_为什么下划线粗细不一样
- 【数据结构】二叉树的节点总个数、叶子节点个数、第K层节点个数、二叉树的深度
- Huawei EROFS 初探
- 给vscode设置背景图片~~贼好用
热门文章
- Flutter 必备开源项目
- ####好好好#####知识图谱上的双塔召回:阿里的IntentGC模型
- 打破ViT的实际应用限制!沈春华老师团队提出无需解码器的目标检测器DFFT
- 图片如何缩小到100k?怎么把图片压缩到指定大小?
- Flink获取外部传递参数的两种方式
- 年轻父母要注意,给孩子取名误区不能犯
- filecoin/lotus 官方开发文件中文翻译2019.12.17最新版本
- office2010 打开报错 无法访问您试图使用的功能所在的网络位置,安装包ProPlusrWW.msi
- FPS游戏开发(3)
- 在J2EE项目中集成快钱支付接口