html字体颜色怎么设置渐变（如何使用HTML5 CANVAS绘制渐变色）

本文目录

• 如何使用HTML5 CANVAS绘制渐变色
• CSS的文本字体颜色如何设置
• 如何在HTML做出渐变
• 如何用HTML5中的canvas实现渐变文字的效果
• css字体渐变，css怎样定义让字体有渐变颜色
• HTML5做文字渐变的方法
• css如何实现颜色的渐变
• 字体颜色的渐变方式设置为变体线性向下
• 怎么设置html文字背景颜色

如何使用HTML5 CANVAS绘制渐变色

HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡，而不是单一的颜色。先来看几个canvas渐变色的例子：
渐变按照类型来分可以分为两种类型：
线性渐变
径向渐变
线性渐变以线性的模式来改变颜色，也就是水平，垂直或对角方向。
径向渐变以圆形模式来改变颜色，颜色以圆形的中心向外辐射。
线性渐变
正如前面所说，线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的createLinearGradient()方法来创建一个线性渐变。下面是一个例子：
var canvas = document.getElementById(ex1);
var context = canvas.getContext(2d);
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 0;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
createLinearGradient()函数有4个参数：x1，y1，x2和y2。这4个参数决定渐变的方向和距离。线性渐变会从第一个点(x1,y1)扩展到第二个点(x2,y2)。
水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同，例如：
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 0;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同，例如：
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
一个对角线的线性渐变水平和垂直方向上的参数都不相同，例如：
var x1 = 0;
var y1 = 0;
var x2 = 100;
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
颜色停止点(Color Stops)
在上面的例子中，并没有指明线性渐变使用什么颜色。为了指明使用什么渐变颜色，可以在渐变对象上使用addColorStop()方法来指定。例如：
var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, rgb(255, 0, 0));
linearGradient1.addColorStop(1, rgb( 0, 0, 0));
addColorStop()方法有两个参数。第一个参数是0-1之间的一个数值，这个数值指定该颜色进入渐变多长的距离，第二个参数是颜色值，例子中使用的是rgb()颜色值。
在上面的例子中为渐变添加了两种颜色。第一种颜色是红色，设置在渐变的开始处。第二种颜色是黑色，设置在渐变的结束处。
你可以添加通过addColorStop()函数来添加更多的颜色。例如下面的例子添加了三种颜色：
var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0 , rgb(255, 0, 0));
linearGradient1.addColorStop(0.5, rgb( 0, 0, 255);
linearGradient1.addColorStop(1 , rgb( 0, 0, 0));
复制代码
上面的代码在渐变的中间添加了一个蓝色。整个渐变将平滑的从红色过渡到蓝色，在过渡到黑色。
使用渐变来填充和描边图形
你可以使用渐变来填充或描边图形。要填充或描边图形可以通过2D上下文的fillStyle或strokeStyle属性来完成。下面是一个示例代码：
var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0 , rgb(255, 0, 0));
linearGradient1.addColorStop(0.5, rgb( 0, 0, 255);
linearGradient1.addColorStop(1 , rgb( 0, 0, 0));
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;
#p#副标题#e#
通过fillStyle或strokeStyle属性来指向渐变对象即可完成渐变的填充或描边。
现在我们可以为图形填充渐变色或描边渐变色。下面是一个例子，一个矩形的填充渐变色和一个矩形的描边渐变色。
var canvas = document.getElementById(ex2);
var context = canvas.getContext(2d);
var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0 , rgb(246, 36, 89));
linearGradient1.addColorStop(0.5, rgb( 31, 58, 147));
linearGradient1.addColorStop(1 , rgb( 34, 49, 63));
context.fillStyle = linearGradient1;
context.fillRect(10,10,100, 100);
var linearGradient2 = context.createLinearGradient(125,0, 225,0);
linearGradient2.addColorStop(0 , rgb(255, 0, 0));
linearGradient2.addColorStop(0.5, rgb( 0, 0, 255));
linearGradient2.addColorStop(1 , rgb( 0, 0, 0));
context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);
渐变的长度
我们在使用渐变的时候要非常明白的知道渐变的长度的概念。如果我们设置渐变从x=10扩展到x=110的距离，那么渐变只会作用在水平方向上从10到110的距离的范围内。超出这个范围的图形将任然受渐变色的影响，但是在这个范围之外的颜色只会是渐变的开始或结束颜色。
距离来说，加入有一个水平线性渐变，x1=150，x2=350。渐变从蓝色过渡到绿色。那么所有水平方向定位x值小于150的图形都会使用蓝色蓝填充。所有水平方向定位x值大于350的图形都会使用绿色来填充。只有那些在水平方向定位x值在150到350之间的图形会使用蓝绿渐变色来填充。
具体来看下面的代码，这里绘制了5个矩形，并用上面所说的渐变来填充它们，让我们来看看效果：
var linearGradient1 = context.createLinearGradient(150, 0, 350,0);
linearGradient1.addColorStop(0, rgb(0, 0, 255));
linearGradient1.addColorStop(1, rgb(0, 255, 0));
context.fillStyle = linearGradient1;
context.fillRect(10,10,130, 100);
context.fillRect(150,10, 200, 100);
context.fillRect(360,10, 130, 100);
context.fillRect(100,120, 150, 100);
context.fillRect(280,120, 150, 100);
从上面的结果可以看出，在渐变区域之外的图形仅会使用开始或结束颜色来填充。
渐变长度是非常重要的概念，需要大家仔细体会。只有掌握它才能在使用渐变是获得正确的结果。
径向渐变
径向渐变是一种圆形的颜色扩展模式，颜色从圆心位置开始向外辐射。下面是一个例子：
一个径向渐变于两个圆形来定义。每一个圆都有一个圆心和一条半径。下面是示例代码：
var x1 = 100; // 第一个圆圆心的X坐标
var y1 = 100; // 第一个圆圆心的Y坐标
var r1 = 30; // 第一个圆的半径
var x2 = 100; // 第二个圆圆心的X坐标
var y2 = 100; // 第二个圆圆心的Y坐标
var r2 = 100; // 第二个圆的半径
var radialGradient1 =
context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, rgb(0, 0, 255));
radialGradient1.addColorStop(1, rgb(0, 255, 0));
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);
如上面的代码所示，这里有两个圆，圆心分别为x1,y1和x2,y2，它们的半径分别为r1和r2，这些值将作为参数传入到2D上下文的createRadialGradient()方法中。
这两个圆必须设置不同的半径，形成一个内圆和一个外圆。这样渐变色就从一个圆形辐射到另一个圆形。
颜色停止点会被添加到这两个圆形之间，例如上面的代码中，第一个颜色停止点中的参数0表示该颜色从第一个圆形开始，第二个颜色停止点中的参数1表示第二种颜色从第二个圆形开始。
下面是上面代码的返回结果：
如果两个圆形的圆心位置相同，那么径向渐变将是一个完整的圆形。如果两个圆的圆心位置不相同，那么径向渐变看起来就像是一个探照灯发出的光线。例如下面的样子：
var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;
var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, rgb(0, 0, 255));
radialGradient1.addColorStop(1, rgb(0, 255, 0));
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);
得到的结构如下所示：

CSS的文本字体颜色如何设置

这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。
1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色规定：网页使用RGB模式颜色
网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色。
传统的html颜色与w3c标准下的css颜色对比和DIV CSS运用颜色
CSS color颜色语法：
color:#000000;
Css样式中color后直接加RGB颜色值（#FFFFFF 、#000000 、#F00）
RGB颜色值在实际布局时候确定，可以使用Photoshop（简称PS）拾取工具进行获取获得。
在DIV标签内使用color颜色样式
《div style="color:#F00"》div《/div》
在CSS选择器中使用color颜色样式CSS代码：
.div{color:#00F}
/* 设置对象div内文字为蓝色 */
DIV+CSS颜色样式完整案例：
Css代码：
.div{color:#00F} /* 设置对象div内文字为蓝色 */
以上使用标签内使用color颜色样式和css代码使用color颜色样式。
文字颜色控制一样
传统html和css 文字颜色相同使用“color：”+“RGB颜色取值”即可，如颜色为黑色字即对应设置CSS属性选择器内添加“color:#000;”即可。
网页背景颜色设置区别
传统设置背景颜色使用“bgcolor=颜色取值”，而CSS中则“background:”+颜色取值。例如：设置背景为黑色，传统Html设置，即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景，如果在W3C中即在对应CSS选择器中始终“background:#000”实现。
设置边框颜色区别
传统“bordercolor=取值”，CSS中“border-color:”+颜色取值。例如：在传统html直接在table标签加入“bordercolor="#000"”即可，在现在CSS中设置“border-color:#000;”即可让边框颜色为黑色，同时记得对包括设置宽度和样式（虚线、实现）。
16个关键字是采取从Windows的VGA调色板： 水色 ， 黑色 ， 蓝色 ， 紫红色 ， 灰 ， 绿 ， 灰 ， 褐红色 ，藏青色， 橄榄色 ， 紫色 ， 红色 ， 银色 ， 青色 ， 白色 ， 黄色 。
RGB颜色给出了四种方法之一
1、#rrggbb（ 如 ，＃00cc00） （强烈推荐使用此表示颜色取值）
2、#的RGB（ 如 ，＃0c0）
3、RGB（十中，x，x）的x是一个包容性的0和255之间的整数（ 如 的RGB（0,204,0））
4、RGB（?％，?％，?％），其中 y是一个包容性的数量介于0.0和100.0（ 如 的RGB（0％，80％，0％））
使用css样式设置对象内容color颜色样式，我们可以使用命名CSS类对象设置其颜色样式，还有直接在html标签内设置color样式。以上我们也详细介绍和实践这2种对文字内容设置颜色方法。
相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
Css3中的transform 渐变属性怎么使用
用CSS3优化HTML5表单的步奏
CSS3关于translate属性的详细介绍

如何在HTML做出渐变

1、HTML实现渐变

《!DOCTYPE html》

《html》

《head》

《meta charset="UTF-8"》

《title》《/title》

《style》

#week{

width: 600px;

height: 600px;

background: linear-gradient(red, yellow, blue);

border-radius: 300px;

}

《/style》

《/head》

《body》

《div id="week"》

《/div》

《/body》

《/html》

2、实现效果

如何用HTML5中的canvas实现渐变文字的效果

《canvas》是HTML5中新增的标签，它可以用来绘制图像，但是必须借助JavaScript脚本实现效果，对于HTML5中的canvas你了解多少？这篇文章就和大家讲讲如何用canvas制作渐变文字效果，对canvas绘制渐变感兴趣的朋友，可以参考一下。
用HTML5中的canvas 实现渐变文字效果，需要用到的语法及参数设置如下，不清楚的小伙伴可以看看。
1、fillText( )
语法：context.fillText(text,x,y,maxWidth)
text表示需要在画布上输出的文本
x表示开始绘制文本的X轴坐标
y表示开始绘制文本的 Y轴坐标
maxWidth 表示允许的最大文本宽度，单位是像素，是一个可选值。
2、createLinearGradient( )
语法：context.createLinearGradient(x0,y0,x1,y1)
x0 表示渐变开始点的X轴坐标
y0 表示渐变开始点的Y轴坐标
x1 表示渐变结束点的X轴坐标
y1 表示渐变结束点的Y轴坐标
举:1：制作一个普通文字（无颜色渐变），代码如下：
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》《/title》
《/head》
《body》
《canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"》《/canvas》
《/body》
《script type="text/javascript"》
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("学习使我快乐",10,50);
《/script》
《/html》效果图如图所示：
举例2：制作一个渐变文字，具体代码如下：
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","orange");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("have a nice day ",10,100);效果图：
制作渐变文字时，首先要用createLinearGradient( )创建一个渐变，然后用fillStyle将渐变运用于文字上。
以上给大家介绍了如何用HTML5中的canvas制作渐变文字效果，既简单又实用，初学者可以自己动手实践，希望你可以制作出更加炫酷的效果。
更多相关课程请访问 Html5视频教程

css字体渐变，css怎样定义让字体有渐变颜色

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用font标签创建三行文字，分别用不同的方法给font字体设置颜色。

3、在test.html文件内，直接在font标签上，通过color属性来设置字体的颜色。例如，设置font字体的颜色为红色。

4、在test.html文件内，设置font标签的class属性为myclass，主要用于下面通过该class来设置css样式。

5、在test.html文件内，设置font标签的id属性为myid，主要用于下面通过该id来设置css样式。

6、在css标签中，设置类名为myclass的样式，例如，设置color属性为蓝色（blue）；设置id为myid的样式，例如，设置color属性为粉红色（pink）。

7、在浏览器打开test.html文件，查看实现的效果。

HTML5做文字渐变的方法

这个简单啊，就用CSS3的新属性 过渡 transition 就好了，代码如下：
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》文字渐变效果《/title》
《style type="text/css"》
div{
width: 100px;
height: 30px;
color: #000;
transition: color 1s;
}
div:hover{
color: yellow;
}
《/style》
《/head》
《body》
《div》移入试试看《/div》
《/body》
《/html》

css如何实现颜色的渐变

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

1、首先，打开html器，新建html文件，例如：index.html。

***隐藏网址***

2、在index.html中的《style》标签中，输入css代码：

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

***隐藏网址***

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

***隐藏网址***

字体颜色的渐变方式设置为变体线性向下

（注意IE9及之前的版本不支持渐变。Safari要加-webkit-的前缀，Opera要加-o-的前缀，Firefox要加-moz-的前缀）
Linear Gradients(线性渐变)-向下/向上/向左/向右/对角方向
向下代码(仅供参考）：
《!DOCTYPE html》
《html》
《head》
《title》《/title》
《style type="text/css"》
.box{
width: 300px;
height: 300px;
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); /* 标准的语法（必须放在最后） */
}
《/style》
《/head》
《body》
《div class="box"》《/div》
《/body》
《/html》

怎么设置html文字背景颜色

如何设置背景颜色？php中文网教你如何通过HTML来设置网页的背景颜色，希望对你有一定的帮助。一：设置背景颜色1.准备HTML首先确定要使用的背景颜色，HTML颜色由每个代码决定。在计算机的Web浏览器中访问，就能查看所有颜色的代码，并且在“HEX”部分中选择要使用的基色。2.使用Notepad++或Notepad打开HTML文件，并且把页面的所有样式信息（包括背景颜色）添加进来。将“background-color”属性添加到“body”元素。background-color要在body括号之间输入，如下：1背景红色或者123body{background-color：red}html如何设置背景颜色？两种方法教会你3.您可以使用“background-color”来定义其他元素的背景，例如标题，段落等。例如，要将背景颜色应用于主标题（）或段落（）。二：创建渐变背景1.制作渐变时，我们需要两条信息起点和角度，以及渐变之间过渡的颜色。您可以选择多种颜色以使渐变在所有颜色之间移动，并且可以设置渐变的方向或角度。属性：背景：线性梯度（方向/角度，颜色1，颜色2，颜色3，等）;2.制作垂直渐变的时候，如果未指定方向，则渐变将从上到下要创建渐变，要在标记之间添加以下代码：12345678910html{min-height：100％;}body{background：-webkit-linear-gradient（left，＃93B874，＃C9DCB9）;background：-o-linear-gradient（right，＃93B874，＃C9DCB9）;background：-moz-linear-gradient（right，＃93B874，＃C9DCB9）;背景：线性梯度（到右侧，＃93B874，＃C9DCB9）;background-color：＃93B874;}当然也可以向渐变添加方向以更改颜色偏移的显示方式，您不仅可以添加两种以上的颜色，还可以在每种颜色之后添加一个百分比。也可以设置每个颜色段所需的间距，为您的颜色添加透明度，使用相同的颜色从颜色淡化为空。也可以使用该rgba()函数来定义颜色，结束值决定透明度：0实体和1透明。以上就是对html如何设置背景颜色的全部介绍。