整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。canvas的绘图上下文支持两种类型的渐变：线性渐变和放射性渐变，其中放射性渐变也称径向渐变。
绘制渐变图形
创建一个简单的渐变非常容易，可能比使用Photoshop还要快，需要三个步骤。
（1）创建渐变对象。
var gradient=cxt.createRadialGradient（0，0，0，canvas.height）；
（2）为渐变对象设置颜色，指明过渡方式。
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');
（3）在context上为填充样式或者描边样式设置渐变。
cxt.fillStyle=gradient;
要设置显示颜色，在渐变对象上使用addColorStop函数即可。除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变换的。为了达到这样的效果，需要使用颜色值的另一种表示方法，如内置alpha组建的CSSrgba函数。
绘制线性渐变，会使用到如下表所示几个方法。
（1）编写代码如下图所示：
（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中创建了一个垂直方向上的渐变，从上到下颜色逐渐变浅。
小提示：上面的代码是2D环境对象产生了一个线性渐变对像，渐变的起始点是（0,0），渐变的结束点是（0，canvas.height），下面使用addColorStop函数设置渐变颜色，最后将渐变填充到上下文环境的样式中。
下次将讲绘制径向渐变，HTML绘制渐变图形（二）
用技巧会让人变的越来越懒，没错，我就是想让你变懒。
下面是我收集的CSS高级技巧，希望你懒出境界。
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
效果图：
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
效果图：
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：
body {
line-height: 1;
}
这样文本元素就可以很容易地从 body 继承。
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
效果图：
突然发现红到蓝也太丑了点，换一个好看一点的，红到绿:
h1
{ text-shadow: 5px 5px 5px #FF0000;
}
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
效果如图：
今天的代码写得我老阔疼，虽然CSS还有很多很多高级用法，但精力有限，因此今天的分享就到这里啦，需要详细代码可留言或私信我哦~
了线性渐变以外，HTML 5 Canvas API还支持径向渐变（放射性渐变），就是颜色会介于两个指定圆间的锥形区域平滑变化。径向渐变和线性渐变使用了颜色终止点是一样的，如果要实现它，就需要使用方法createRadialGradient。
绘制径向渐变
createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿着两个圆之间的锥面绘制渐变。其中前三个参数代表开始的圆，圆心为（x0，y0），半径为r0。最后三个参数代表结束的圆，圆心为（x1，y1），半径为r1。
（1）编写代码如下图所示，在<body>标签中加入以下代码。
（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中，从圆心的中心亮点开始向外逐步发散，形成了一个径向渐变。
小提示：上面代码中，首先创建渐变对象gradient，此处使用方法createRadialGradient创建了一个径向渐变，下面使用addColorStop添加颜色，最后将渐变填充到上下文环境中。
*请认真填写需求信息，我们会在24小时内与您取得联系。
