HTML5_canvas_线性渐变

canvas 线性渐变 var linearG = pen.createLinearGradient(startX, startY, endX, endY); 两点的连线,决定了渐变的方向,和区间 var pen = myCanvas.getContext("2d"); // 1. 创建线性渐变 var linearG = pen.createLinearGradient(50, 50, 100, 100); // 2. 添加渐变色 linearG = addColorStop(0,…

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

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线性.径向.我今天先讲线性渐变,下篇我们再看看径向渐变. SVG线性渐变如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦.在<defs>中定义,然后在后面把它们作为填充或描边来引用. 我们使用<linearGradient>元素来定义线性渐变.我们从一个简单的…

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

线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear-gradient(red, blue); } 上述代码的效果如图5.9所示. 图5.9 最简单的线性渐变效果如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: .test { background:-webkit-linear-gradient(red,…

css线性渐变--linear-gradient

使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. 更进一步的话,应该就是斑马线的实现了,只要多谢几遍,其实也没什么难度. 最近在学习<css揭秘>,里面关于linear-gradient的用法,真的让人有大开眼界的感觉. 在他讲解的切角效果的章节里面,扩展几个css图形变化. 1.单个切角 background: linear-gradient(…

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

<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> <i class="light"></i> </p> .overimg{ position: relative; display: block; /* ov…

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器 background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器 background: -webkit-linear-gradient(position/deg,startCo…

深入理解CSS线性渐变linear-gradient

× 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性渐变. 定义渐变实际上是两种或多种颜色之间的平滑过渡.而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡.渐变的实现由两部分组成:渐变线和色标.渐变线用来控制发生渐变的方向:色标包含一个颜…

颜色线性渐变-CAGradientLayer

我们先来看一下效果图吧: 其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现.由于代码很简单,就不做过多讲解了,直接看代码吧. import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() setupBackgroundLayer() } private func setupBackgroundLayer(){ // 线性渐…

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; } &…

CSS3 Gradient线性渐变

废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script><style type="text…

CSS3-canvas绘制线性渐变

<!doctype html><html><head><meta charset="utf-8"><title>canvas绘制线性渐变-高级函数</title></head> <body onLoad="draw('canvas')"><canvas id="canvas" width="1300" height="…

html5 基本布局+新标签+新选择器 + 线性渐变

html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> header{background:#abcdef; height:150px;} nav{height:30px; b…

CSS线性渐变

/*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#f1f1f1); /*IE*/ background:-moz-linear-gradient(top,#ffffff,#f1f1f1);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ffff…

CSS3 线性渐变（linear-gradient）兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的渐变…

CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌的IE浏览器).本文照常忽略IE不管,我们主要看看在Mozilla.Webkit.Opera下的应用,当…

css3 线性渐变和径向渐变

线性渐变:ie6以下不兼容径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Background Color</title> <style ty…

[转]ebkit内核浏览器的Linear Gradients (线性渐变)

转自:http://www.css88.com/archives/tag/webkit-gradient webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop…

CSS3中颜色线性渐变实战

css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .test{ background:linear-gradient(red, blue); } 上述代码的效果如图所示. 最简单的线性渐变效果如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: CSS Code复制内容到剪贴板 .test { background:…

【 D3.js 高级系列 — 5.1 】颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范…

Android获得线性渐变某点的颜色

安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dip&q…

CSS3渐变(Gradients)-线性渐变

CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3定义了两种类型的渐变(gradients): 1.线性渐变(Linear Gradients)-向下.向上.向左.向右.对角方向:(to bottom.to top.to right.to…

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐…

兼容IE与firefox、chrome的css 线性渐变（linear-gradient）

现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平 Firefox background: -moz-linear-gradie…

CSS3线性渐变linear-gradient

转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下.left是从左到右,如果定义成left top,那就是从左上角到右下角.第二个…

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

在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGradient 四个参数分别是渐变色起始坐标x,起始坐标y,结束坐标x,结束坐标y. 渐变色沿着两点之间的一条线来进行渐变. 径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient 六个参数分别是起点圆心坐标(x0,y0) 起点圆心半径…

CSS3的线性渐变（linear-gradient）

CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div{ width:200px; height:200px; background:-webkit-linear-gradient(left,#F39,#09C); } 如图: 参数: -webkit-linear-gradient 是 webkit 引擎对渐变的实现参数.第一个参数控制渐变方向,比如…

linear-gradient线性渐变

作者:zccst CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变). 1,在mozila background: -moz-linear-gradient( top,#ccc,#000); 2,-webkit-linear-gradient(top,#ccc,#000); background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/ background:-webk…