投稿
  1. 首页
  2. 安全

javascript 如何实现div 颜色的渐变？？

京山一中 • 2023-5-27 • 安全 • 阅读 9

javascript 如何实现div 颜色的渐变？？,第1张

动态渐变

<span style="font-size:12px;"><html>

<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>

为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果

<span style="font-size:12px;"><script type="text/javascript">
var node=documentgetElementById("fade");
var color="#0000";
var level=1;

windowload=function fading(){
nodestylebackground=color+leveltoString()+leveltoString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>

静态渐变

在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(05,#0000ff),to(#ffffff));
简单解释下：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；

附送下简单的其他的基本代码


FILTER: progid:DXImageTransformMicrosoftGradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/IE6/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/非IE6的其它/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/非IE6的其它/

直接拖入AI对象，是将AI的路径及效果搬迁入ID，由于AI是属于专业矢量绘图软件，其支持的图像效果要远远多于ID，所以有部分效果是会消失的。在你第一次置入后如果没有进行修改，ID会以“预览”的形式保留AI图形的效果，可一旦在ID中做进一步修改，不支持的效果将会完全消失。

妥当的做法，应是将AI等等不同软件制作的元素文件，转化成当前ID软件对应的PDF版本，再置入ID中，这样能凭借adobe的跨平台传输协议标准达到最大的兼容能力。

iOS 绘制颜色渐变圆环
本文主要介绍一种绘制颜色渐变的进度圆环 先上效果图:

实现思路:

CAShapeLayer+UIBezierPath+CAGradientLayer

UIBezierPath 用来绘制圆环路径;

CAShapeLayer 根据UIBezierPath绘制的曲线路径渲染出图形, 利用GPU渲染节省内存,提高性能;

CAGradientLayer 用来绘制颜色渐变的图层, 最后添加到view的layer用来展示;

步骤:

先创建一个UIView, 在其内部实现圆环的绘制

@property (strong, nonatomic)UIView                bgview;
_bgview = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 250, 250)];

_bgviewbackgroundColor = [UIColor grayColor];

[selfview addSubview:_bgview];

Paste_Imagepng

2绘制背景圆环, 并将其添加到view的layer层上

//创建背景圆环

CAShapeLayertrackLayer = [CAShapeLayerlayer];

trackLayerframe=selfbounds;

//清空填充色

trackLayerfillColor= [UIColorclearColor]CGColor;

//设置画笔颜色 即圆环背景色

trackLayerstrokeColor=  [UIColorcolorWithRed:170/2550green:210/2550blue:254/2550alpha:1]CGColor;trackLayerlineWidth=20;

//设置画笔路径

UIBezierPathpath = [UIBezierPathbezierPathWithArcCenter:CGPointMake(selfframesizewidth/20,selfframesizeheight/20) radius:selfframesizewidth/20-10startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI 2clockwise:YES];

//path 决定layer将被渲染成何种形状

trackLayerpath= pathCGPath;

[selflayeraddSublayer:trackLayer];

Paste_Imagepng

3 使用CAGradientLayer 绘制渐变的背景色

由于CAShapeLayer不能顺着弧线进行渐变只能指定两个点之间进行渐变, 所以四种颜色的渐变只能是将view分成四个小的部分, 分别实现两种颜色间的渐变 最后在组合在一起, 形成四种颜色的渐变

CGFloat width = _bgviewframesizewidth;

CGFloat height = _bgviewframesizeheight;

CALayer gradientLayer = [CALayer layer];

gradientLayerframe = selfbgviewbounds;

CAGradientLayer gradientLayer1 = [CAGradientLayer layer];

gradientLayer1frame = CGRectMake(width/20, 0, width/20,  height/20);

gradientLayer1colors = @[(__bridge id)[UIColor redColor]CGColor, (__bridge id)[UIColor orangeColor]CGColor];

//startPoint和endPoint属性，他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}

//startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置

//当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化

//当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化

//其余的 颜色沿着对角线方向变化

gradientLayer1startPoint = CGPointMake(02, 0);

gradientLayer1endPoint = CGPointMake(08, 1);

[gradientLayer addSublayer:gradientLayer1];

CAGradientLayer gradientLayer2 = [CAGradientLayer layer];

gradientLayer2frame = CGRectMake(width/20, width/20, width/20,  height/20);

gradientLayer2colors = @[(__bridge id)[UIColor orangeColor]CGColor, (__bridge id)[UIColor yellowColor]CGColor];

[gradientLayer2 setLocations:@[@03, @08,@1]];

gradientLayer2startPoint = CGPointMake(0, 0);

gradientLayer2endPoint = CGPointMake(0, 1);

[gradientLayer addSublayer:gradientLayer2];

CAGradientLayer gradientLayer3 = [CAGradientLayer layer];

gradientLayer3frame = CGRectMake(0, width/20, width/20,  height/20);

gradientLayer3colors = @[(__bridge id)[UIColor yellowColor]CGColor, (__bridge id)[UIColor greenColor]CGColor];

gradientLayer3startPoint = CGPointMake(05, 1);

gradientLayer3endPoint = CGPointMake(05, 0);

[gradientLayer addSublayer:gradientLayer3];

CAGradientLayer gradientLayer4 = [CAGradientLayer layer];

gradientLayer4frame = CGRectMake(0, 0, width/20,  height/20);

gradientLayer4colors = @[(__bridge id)[UIColor greenColor]CGColor, (__bridge id)[UIColor blueColor]CGColor];

gradientLayer4startPoint = CGPointMake(05, 1);

gradientLayer4endPoint = CGPointMake(05, 0);

[gradientLayer addSublayer:gradientLayer4];

[selfbgviewlayer addSublayer:gradientLayer];

4 将颜色图层切成圆环

@property (nonatomic, strong) CAShapeLayer progressLayer;

_progressLayer = [CAShapeLayer layer];

_progressLayerframe = selfbounds;

_progressLayerfillColor = [UIColor clearColor]CGColor;

_progressLayerstrokeColor  = [UIColor colorWithRed:170/2550 green:210/2550 blue:254/2550 alpha:1]CGColor;

_progressLayerlineWidth = 20;

_progressLayerpath = pathCGPath;

gradientLayermask = _progressLayer;

Paste_Imagepng

5 利用locations 属性调整颜色空间

根据上面的运行结果可以看出底部的颜色交接的地方有颜色的断层 主要是第三部分底部的区域较小导致的 可以利用locations数组进行微调

默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组(以NSNumber包装)。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。00代表着渐变的开始，10代表着结束。

[gradientLayer2 setLocations:@[@03, @08]];
Paste_Imagepng

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml。

2、在indexhtml中的<style>标签中，输入css代码：

div {width: 200px;height: 150px;background: linear-gradient(red, white);}

3、浏览器运行indexhtml页面，此时td中的div的背景颜色从红色到白色渐变。

项目中用到地图设置渐变色，查找资料找到两种方法：一种设置颜色，一种设置透明度；

//为颜色设置渐变效果：

    UIView view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

    CAGradientLayer gradient = [CAGradientLayer layer];

//设置开始和结束位置(设置渐变的方向)

    gradientstartPoint = CGPointMake(0, 0);

    gradientendPoint = CGPointMake(1, 0);

gradientframe =CGRectMake(0,0,40,40);

gradientcolors = [NSArray arrayWithObjects:(id)[UIColor redColor]CGColor,(id)[UIColorwhiteColor]CGColor,nil];

    [viewlayer insertSublayer:gradient atIndex:0];

    [selfview addSubview:view];
    //为透明度设置渐变效果

    UIView view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

    UIColor colorOne = [UIColor colorWithRed:(216/2550)  green:(0/2550)  blue:(18/2550)  alpha:10];

    UIColor colorTwo = [UIColor colorWithRed:(216/2550)  green:(0/2550)  blue:(18/2550)  alpha:00];

    NSArray colors = [NSArray arrayWithObjects:(id)colorOneCGColor, colorTwoCGColor, nil];

CAGradientLayer gradient = [CAGradientLayer layer];

//设置开始和结束位置(设置渐变的方向)

    gradientstartPoint = CGPointMake(0, 0);

    gradientendPoint = CGPointMake(1, 0);

gradientcolors = colors;

    gradientframe = CGRectMake(0, 0, 40, 40);

[viewlayerinsertSublayer:gradientatIndex:0];

    [selfview addSubview:view];

因为在导入过程中更改了某些设置，导致其渐变。
导入id的过程中，在右边的设置栏中，有一个修改照片设置要选择无，那就不会使其导入后发生变化了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12691420.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
京山一中 京山一中 一级用户组
0 0
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表（0条）

保存