废话小说，沾待马

<!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. ASP.NET Core 开发-中间件(StaticFiles)使用

    ASP.NET Core 开发,中间件(StaticFiles)的使用,我们开发一款简易的静态文件服务器. 告别需要使用文件,又需要安装一个web服务器.现在随时随地打开程序即可使用,跨平台,方便快捷 ...

  2. android 中layer-list的用法

    1.可以将多个图片按照顺序层叠起来 2.在drawable下建立一个xml文件 <layer-list xmlns:android="http://schemas.android.co ...

  3. iOS 阶段学习第11天笔记（OC基础知识）

    iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import  用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...

  4. MySQL Workbench 修改快捷键

    在安装根目录查到\data\main_menu.xml这个文件 例如,修改执行sql语句的快捷键为F5 <value type="object" struct-name=&q ...

  5. nginx平台初探(100%)

    http://tengine.taobao.org/book/chapter_02.html 初探nginx架构(100%)¶ 众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么 ...

  6. Eclipse的SVN插件下载

    Links for 1.8.x Release:Eclipse update site URL: http://subclipse.tigris.org/update_1.8.xsvn插件包下载: h ...

  7. html中代码高亮显示

    <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> ...

  8. Gym 100703G---Game of numbers（DP）

    题目链接 http://vjudge.net/contest/132391#problem/G Description standard input/outputStatements — It' s ...

  9. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  10. Fiddler （三） Composer创建和发送HTTP Request

      之前已经写过两篇Fiddler的文章了,分别是[Fiddler教程] [Fiddler script用法].  我准备把Fiddler写成一个系列. Fiddler的功能还有很多, 很多功能都没有 ...