废话小说，沾待马

<!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 linearGradient = context.createLinearGradient(30,30,800,800);
参数1：渐变x的开始坐标位置
参数2：渐变y的开始坐标位置
参数3、4：渐变的方向
倾斜渐变；(0,0,800,800)
水平渐变；(0,0,800,0)
垂直渐变；(0,0,0,800)

第二步：
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);
说明：第一句的意思是填充的颜色按照上面的设置

注意：如果设置context.createLinearGradient(50,0,300,00);
那么水平方向0-50的区域显示白色； （开始的颜色）
300-800的区域显示黑色 （结束的颜色）
注意：如果设置context.createLinearGradient(0,50,0,500);
那么垂直方向 0-50的区域显示白色；（开始的颜色）
500-800的区域显示黑色 （结束的颜色）
*/
var linearGradient = context.createLinearGradient(0,50,0,500);
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
linearGradient.addColorStop(0.75,'blue');
linearGradient.addColorStop(1.0,'black');
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>

fillStyle线性渐变的更多相关文章

  1. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. CSS3-canvas绘制线性渐变

    <!doctype html><html><head><meta charset="utf-8"><title>canv ...

  3. Canvas使用渐变之-线性渐变详解

    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGrad ...

  4. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

  5. 如何给SVG填充和描边应用线性渐变

    给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...

  6. fillStyle径向渐变

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  7. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（3）线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  8. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  9. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

随机推荐

  1. 全动态Portlet点击后选中样式

    1  背景概述 在配置公司云平台的帮助信息过程中,由于使用的全动态portlet的数据URL获取到的是静态数据,没有办法在后台做选中的逻辑判断,所以需要在前台来控制选中列表的样式,这里将对前台选中列表 ...

  2. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  3. 浅谈你感兴趣的 C# GC 机制底层

    本文内容是学习CLR.via C#的21章后个人整理,有不足之处欢迎指导. 昨天是1024,coder的节日,我为自己coder之路定下一句准则--保持学习,保持自信,保持谦逊,保持分享,越走越远. ...

  4. CentOS 配置防火墙操作实例（启、停、开、闭端口）

    防火墙的基本操作命令 查询防火墙状态:[root@localhost ~]# service   iptables status<回车> 停止防火墙:[root@localhost ~]# ...

  5. 使用CallerMemberName简化InotifyPropertyChanged的实现

    在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知,     class NotifyObject : INotifyPropertyChanged   ...

  6. NHibernate可视化设计插件——Mindscape.NHibernateModelDesigner

    我一直希望NHibernate能够支持像EF一样支持可视化操作,今天去网上搜了一下,发现有一个插件,类似EF的可视化功能. 下载地址:Mindscape.NHibernateModelDesigner ...

  7. GJM ：用JIRA管理你的项目（二）JIRA语言包支持及插件支持　［转载］

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. orcl的小技巧和分页

    1Oracle中查看所有用户语句 select * from dba_users 1.修改用户的密码 alter user 用户名 identified by 密码; 2.如何查询stuInfo表中自 ...

  9. Hibernate(七)__多对一 、一对多、 一对一、多对多

    1.many-to-one 以学生和部门之间的关系为例: Department.hbm.xml <?xml version="1.0" encoding="utf- ...

  10. 用fasterjson需要注意的地方

    JSONArray.toJSONString()之后不是一个json,而是json中的一个数组 JSONObject是一个json JSON.toJSONString()不可多次使用,因为每次调用JS ...