废话小说，沾待马

<!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. RabbitMQ框架学写笔记-20161130

  2. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  3. 在Excel中使用频率最高的函数的功能和使用方法

    在Excel中使用频率最高的函数的功能和使用方法,按字母排序: 1.ABS函数 函数名称:ABS 主要功能:求出相应数字的绝对值. 使用格式:ABS(number) 参数说明:number代表需要求绝 ...

  4. Nancy 自定义JsonSerializer

    1.创建自己的jsonserializer类 public class CustomJsonNetSerializer : JsonSerializer, ISerializer { public C ...

  5. Debian 7 下安装CodeBlocks12.11

    1. 安装编译器 sudo apt-get install build-essential 2. 安装debug工具gdb sudo apt-get install gdb 3. 更新源 sudo n ...

  6. 【Java每日一题】20161123

    package Nov2016; import java.util.Scanner; public class Ques1123 { public static void main(String[] ...

  7. javaweb项目springmvc，和tomcat对静态文件的处理

    1.激活Tomcat的defaultServlet来处理静态文件,web.xml配置 <servlet-mapping> <servlet-name>default</s ...

  8. GJM：书籍相关整理 [原创]

    多人在线教程(中文)MultiplayerTutorial.pdf           链接: http://pan.baidu.com/s/1boDGGGZ 密码:9l2g 版权声明:本文原创发表于 ...

  9. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  10. 如何订阅Form的自定义事件

    Window Form类有很多的属性/方法和事件,其中事件属于一种发布订阅模式 .订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主体对象.这个主体对象在自身状态变化时,会通知所 ...