整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS3实现文本字体渐变双色变化，实现颜色过渡渐变，可以用在首页展示栏中，增强用户体验！下面来看看效果：
实现代码非常简单：
识点：for循环语句，字符串方法，进制转换，this指向问题，变量，数组方法，基本事件处理等。
源码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px; font-family:"微软雅黑";}
#box{width:400px;
height:450px;
background:#000;
margin:50px auto;
border:5px solid #000;
border-radius:5px;
}
#show{width:100%;
height:190px;
background:#00ccff;
line-height:200px;
font-size:8px;
font-weight:bold;
text-align:center;
border-radius:5px;
}
#font ul{margin-left:10px;
margin-top:30px;}
#font ul li{width:380px;
height:50px;
list-style-type:none;
color:#ddd;}
#font ul li span{display:block;
width:50px;
height:50px;
line-height:50px;
text-align:right;
float:left;
}
#font ul li .roll{width:290px;
height:50px;
float:left;
line-height:50px;
padding-left:30px;
}
#font ul li .roll .move{width:200px;
height:12px;
display:inline-block;
background:#fff;
margin-left:15px;
margin-right:15px;
border-radius:10px;
background-size:cover;
border:1px solid #fff;
position:relative;
}
#font ul li .roll .move .prog{position:absolute;
top:0px;
width:0px;
height:12px;
border-radius:10px 0 0 10px;
background:url("images/slider-bar.png") bottom;}
#font ul li .roll .move .prog .but{width:22px;
height:22px;
position:absolute;
top:-3px;
background:url("images/dot-bg.png") no-repeat;
cursor:pointer;
left:0px;}
</style>
</head>
<body>
<div id="box">
<div id="show">云烟好帅啊</div>
<div id="font">
<ul>
<li>
<span>字号</span>
<div>
8
<div>
<div>
<div></div>
</div>
</div>
40px
</div>
</li>
<li>
<span>颜色R</span>
<div>
0
<div>
<div>
<div></div>
</div>
</div>
255
</div>
</li>
<li>
<span>G</span>
<div>
0
<div>
<div>
<div></div>
</div>
</div>
255
</div>
</li>
<li>
<span>B</span>
<div>
0
<div>
<div>
<div></div>
</div>
</div>
255
</div>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
/*
1.JS主要针对页面当中的HTML元素以及样式进行修改，从而得到特效
2.我们一般用JS写特效，要知道触发特效的条件是什么
3.促发这个条件的对象是谁
4.写这个事件里面发生的事情
5.获取鼠标的移动水平方向的距离
6.this代表当前执行这个事件的对象
(这个事件是谁做的 那么这个事件当中的this就是谁)
*/
var oBut = document.getElementsByClassName("but");//通过元素的类名 是以一个数组的形式保存
var oFont = document.getElementById("show");//通过ID名获取元素
var oProg = document.getElementsByClassName("prog");
var width = [0,0,0,0];
var rgb = ["00","00","00"];
for (var i=0;i<oBut.length;i++)//重复执行某一个语句（循环体） 限制条件
{
oBut[i].index=i;//自定义一个index属性保存i
oBut[i].onmousedown = function(e){//鼠标点击下去
//event事件对象 clientX clientY
var e = e || window.event;//做IE兼容
this.x = e.clientX;//当前对象的属性去保存这个值(自定义一个x属性)
var thisIndex = this;//定义一个变量保存this指向对象
var lastLeft = width[this.index];
//console.log("鼠标点击下去");
document.onmousemove = function(e){//鼠标移动事件
//console.log("鼠标移动事件");
var e = e || window.event;//做IE兼容
width[thisIndex.index] = e.clientX-thisIndex.x+lastLeft;
if (width[thisIndex.index]>180)width[thisIndex.index]=180;
if (width[thisIndex.index]<0)width[thisIndex.index]=0;
oBut[thisIndex.index].style.left = width[thisIndex.index]+"px";
oProg[thisIndex.index].style.width = width[thisIndex.index]+"px";
if (thisIndex.index == 0)
{
oFont.style.fontSize = width[thisIndex.index]/180*40+8+"px";
//驼峰命名法
}else{
var num = parseInt(width[thisIndex.index]/180*255);
/*if (num<16)
{
numStr ="0"+num.toString(16);
}else{
numStr = num.toString(16);
}*/
rgb[thisIndex.index-1] = num<16?"0"+num.toString(16):num.toString(16);
oFont.style.color = "#"+rgb[0]+rgb[1]+rgb[2];
}
}
document.onmouseup = function(){//鼠标松开事件
//console.log("鼠标松开事件");
this.onmousemove = null;//终止移动事件
this.onmouseup = null;//终止鼠标松开事件
}
}
}
</script>
点赞 + 关注 + 收藏 = 学会了
IText 是 Fabric.js 提供的一个 可编辑文本 的元素。
要设置文字颜色，可以设置 fill 。
但 fill 会设置所有文字的颜色，如果你只想修改指定文字的颜色，只用 fill 就不是那么容易实现了。
本文要讲的就是 设置指定文字的颜色和背景色。
设置文字颜色或背景色，需要分情况讨论的：
接下来就将上述情况逐一讲解。
<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
// 初始化画布
const canvas = new fabric.Canvas('c')
// 创建文本
const iText = new fabric.IText('hello world')
// 将文本添加到画布里
canvas.add(iText)
</script>
复制代码首先把 Fabric.js 引入，然后初始化画布。如果对这个概念不太熟的话，可以看看 Fabric.js 从入门到膨胀。
最后通过 new fabric.IText 创建一段文字添加到画布中。
// 省略部分代码
const iText = new fabric.IText('hello world', {
fill: 'pink'
})
复制代码fill 可以设置文字的填充颜色。在 Fabric.js 里是使用这个属性设置颜色的，和 css 设置文字颜色使用 color 不一样~
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
fill: '#f00' // 文字颜色，#f00是红色
}
}
}
})
复制代码第一次看到上面的代码时我也觉得有点奇怪，后来仔细看了下才发现这样设计的用意。
styles 是一个对象。
styles: { // 设置样式
0: { // 第1行
1: { // 第2个字符
// 要设置的样式
}
}
}
复制代码上面这段代码是这个意思。行号和字符位置都是从0开始算起，有点像数组下标的意思。
我们这个例子只有1行，所以行号是0。
e 的下标是 1 。所以上面的代码就把 e 设置成红色了。其他字符还是默认的颜色。
const iText = new fabric.IText('hello\nworld', {
styles: { // 设置样式
0: { // 第1行
1: {
fill: '#f00' // 文字颜色
}
},
1: { // 第2行
2: {
fill: 'hotpink'
}
}
}
})
复制代码IText 的换行是用 \n 来表达的。
这个例子要 修改第1行第2个字符的文字颜色为红色，第2行第3个字符为亮粉色 。
从代码里的注释应该可以看得懂本次操作。
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
textBackgroundColor: 'yellowgreen', // 背景色
}
},
})
复制代码和设置文字颜色的原理一样，只是把关键字改一改就行。
textBackgroundColor 翻译成中文就是文本背景色。
⭐Fabric 设置IText指定字符颜色和背景色
《Fabric.js 笔刷到底怎么用？》
《Fabric.js 圆形笔刷》
《纯CSS 红砖背景墙》
《Fabric.js 自由绘制椭圆》
*请认真填写需求信息，我们会在24小时内与您取得联系。
