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 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线性渐变的更多相关文章
- HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS3-canvas绘制线性渐变
<!doctype html><html><head><meta charset="utf-8"><title>canv ...
- Canvas使用渐变之-线性渐变详解
在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGrad ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
- 如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...
- fillStyle径向渐变
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（3）线性渐变
线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...
- css线性渐变--linear-gradient
使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...
- 使用CSS3线性渐变实现图片闪光划过效果
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...
随机推荐
- 史上最全系列Android开发环境搭建
一.安装JDK1.JDK下载打开网站http://www.oracle.com/technetwor ... nloads-1880260.html,选择相应的操作系统下载JDK 2.安装JDK本机是 ...
- iOS阶段学习第19天笔记（协议-Protocol）
iOS学习(OC语言)知识点整理 一.关于协议(Protocol)的介绍 1)概念:协议指多个对象之间协商的一个接口对象,协议提供了一些方法用在协议的实现者和代理者 之间通讯的一种方式 2) ...
- Windows Server 2012 配置多用户远程桌面
前段时间因为需要多用户同时远程连接 windows server 2012,但找了半天也没找到远程桌面管理,最后从搜索中找到如下方法,经测试可行! 打开注册表,进入路径: [HKEY_LOCAL_MA ...
- 数据库SQL server规则的创建、查看、修改和规则的绑定与松绑、删除
用CREATE RULE语句创建规则 创建雇佣日期规则 hire_date_rule CREATE RULE hire_date_rule AS @hire_date>='1980-01-01' ...
- mysql int(3)与int(11)的区别
总结,int(M) zerofill,加上zerofill后M才表现出有点点效果,比如 int(3) zerofill,你插入到数据库里的是10,则实际插入为010,也就是在前面补充加了一个0.如果i ...
- 【软件使用】GitHub使用教程for Eclipse
http://www.cnblogs.com/yc-755909659/p/3753626.html 1.下载egit插件 打开Eclipse,git需要eclipse授权,通过网页是无法下载egit ...
- Scalaz（1）－ 基础篇：隐式转换解析策略－Implicit resolution
在正式进入scalaz讨论前我们需要理顺一些基础的scalaz结构组成概念和技巧.scalaz是由即兴多态(ad-hoc polymorphism)类型(typeclass)组成.scalaz typ ...
- No.010：Regular Expression Matching
问题: Implement regular expression matching with support for '.' and '*'.'.' Matches any single charac ...
- javascript之八——BOM
8.1 window对象 BOM的核心对象是window--表示浏览器的一个实例.window有双重角色: 是通过javascript访问浏览器窗口的一个接口: 是ECMAScript规定的Globa ...
- Java 经典实例：自定义迭代器
编写自己的Iterator,实现Iterator接口,这里多说一句,实现Iterable后,可以用"foreach"循环遍历你的对象. import java.util.Itera ...