fillStyle径向渐变
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 镜像渐变
第一步：
var radialGradient = context.createRadialGradient(300,300,0,300,300,50);
参数1：第一个圆圆心的x坐标
参数2：第一个圆圆心的y坐标
参数3：第一个圆的半径
参数4：第二个圆圆心的x坐标
参数5：第二个圆圆心的y坐标
参数6：第二个圆的半径
第二步：
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1：位置的百分比
参数2：渐变的颜色
第三步：
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
*/
var radialGradient = context.createRadialGradient(400,400,100,400,400,500);
radialGradient.addColorStop(0,'#fff');
radialGradient.addColorStop(0.25,'yellow');
radialGradient.addColorStop(0.50,'green');
radialGradient.addColorStop(0.60,'red');
radialGradient.addColorStop(0.75,'blue');
radialGradient.addColorStop(1.0,'black');
context.fillStyle = radialGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>
fillStyle径向渐变的更多相关文章
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas径向渐变详解
创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- html5 canvas 圆形径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
- CSS3：radial-gradient，径向渐变的使用方法
语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...
随机推荐
- 【记录】ASP.NET MVC RegisterBundles
1. Install the package from nuget Install-Package Microsoft.AspNet.Web.Optimization 2,BundleConfig 配 ...
- T-Sql（二）事务（Transaction）
今天讲下T-Sql语法中事务的用法,事务在项目中一般用的很少,主要用于转账,或是一些多表操作,第一步完成不了滚回,不执行接下的步骤.要么都不完成要么都完成,这是事务的特征. 语法很简单,示例代码如下: ...
- 相克军_Oracle体系_随堂笔记007-PGA
实际工作中,Oracle中有两个很重要:Server Process 和 PGA. PGA内存作用和构成 1.PGA作用 2.PGA构成 1)private SQL area 2)Sess ...
- hibernate笔记--单向一对多映射方法
上一篇讲的是单向多对一的表关系,与单向一对多的关系正好相反,如下图所示关系: ,可以看出年级表和学生表是一对多的关系,一条年级信息对应多条学生信息,在hibernate中成为单向的一对多的映射关系,应 ...
- PHP面试题之实现输出100以内的质数
最近求职时的其中一道面试题: 求100之内的质数 <? //求100以内质数 for ($i = 1; $i <= 100; $i++) { $k = 0; for ($j = 1; $j ...
- MySQL常用SQL总结
1. 常见命令 连接本地数据库与远程数据库(172.16.xx.xx:3306): mysql -h localhost -u root -p123 mysql -h 172.16.xx.xx -P ...
- web.config配置
<appSettings> <add key="DepartmentRootID" value="A90AEAEC-E3D4-43DE-BB67-854 ...
- Hibernate-chapter two
又见面啦!!!经过上一章的学习,我们大概对Hibernate框架有所了解.接下来进入我们的第二阶段——实战! ======准备数据库====== 这里使用MySQL作为示范. 创建一个名为Hibern ...
- C语言： 预处理
1. 字符映射 键盘有多种标准规格,例如常用的IBM 104键盘标准,然而不是所有键盘都能打出像#这样的符号,因此C语言的预处理引入了字符映射机制.如果程序员要求,预处理会按照约定对源代码中的字符进行 ...
- java中抽象、分装、继承和多态的理解
1.抽象.封装装.继承和多态是java面向对象编程的几大特点. 抽象:所谓抽象就是对某件事务,我们忽略我们不关心不需要的部分,提取我们想要的属性和行为,并且以代码的形式提现出来:例如我们需要对一个学生 ...