Canvas（6）
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下是设置Canvas圆形渐变的方法：
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
&!DOCTYPE html&
&meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /&
&meta http-equiv="Content-Type" content="text/ charset=GBK" /&
&title& 圆形渐变 &/title&
&h2& 圆形渐变 &/h2&
&canvas id="mc" width="400" height="280"
style="border:1px solid black"&&/canvas&
&script type="text/javascript"&
// 获取canvas元素对应的DOM对象
var canvas = document.getElementById('mc');
// 获取在canvas上绘图的CanvasRenderingContext2D对象
var ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(30 , 20);
// 创建圆形渐变
lg = ctx.createRadialGradient(80, 40 , 5 , 80 , 40 , 60);
// 向圆形渐变上添加颜色
lg.addColorStop(0.2 , "#f00");
lg.addColorStop(0.5 , "#0f0");
lg.addColorStop(0.9 , "#00f");
// 设置使用圆形渐变作为填充颜色
ctx.fillStyle =
// 填充一个矩形
ctx.fillRect(0 , 0 , 160 , 80);
// 恢复坐标系统
ctx.restore();
// 平移坐标系统
ctx.translate(280 , 160)
ctx.beginPath();
// 添加圆弧
ctx.arc(0 , 0
, 80 , 0 , Math.PI * 2 , true);
ctx.closePath();
ctx.lineWidth = 12;
// 再次创建圆形渐变
lg2 = ctx.createRadialGradient(0, 0 , 5 , 0 , 0 , 80);
// 向圆形渐变上添加颜色
lg2.addColorStop(0.1 , "#ff0");
lg2.addColorStop(0.4 , "#0ff");
lg2.addColorStop(0.8 , "#f0f");
// 设置使用圆形渐变作为填充颜色
ctx.fillStyle = lg2;
ctx.fill();
三 运行结果
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12197次
排名：千里之外
原创：503篇HTML5 Canvas：绘制渐变色--PHP中文网QQ群微信公众号HTML5 Canvas：绘制渐变色HTML5 CANVAS：绘制渐变色　　HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡，而不是单一的颜色。先来看几个canvas渐变色的例子：　　渐变按照类型来分可以分为两种类型：　　线性渐变　　径向渐变　　线性渐变以线性的模式来改变颜色，也就是水平，垂直或对角方向。　　径向渐变以圆形模式来改变颜色，颜色以圆形的中心向外辐射。　　线性渐变　　正如前面所说，线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的createLinearGradient()方法来创建一个线性渐变。下面是一个例子：var canvas
= document.getElementById(&ex1&);
var context = canvas.getContext(&2d&);
var x2 = 100;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
复制代码　　createLinearGradient()函数有4个参数：x1，y1，x2和y2。这4个参数决定渐变的方向和距离。线性渐变会从第一个点(x1,y1)扩展到第二个点(x2,y2)。　　水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同，例如：var x1 =
var x2 = 100;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
复制代码　　垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同，例如：var x1 =
var y2 = 100;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
复制代码　　一个对角线的线性渐变水平和垂直方向上的参数都不相同，例如：var x1 =
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;　　通过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,
linearGradient2.addColorStop(0.5, 'rgb(
0, 0, 255)');
linearGradient2.addColorStop(1
, 'rgb(
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,
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,
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);
复制代码　　得到的结构如下所示：以上就是HTML5 Canvas：绘制渐变色的内容，更多相关内容请关注PHP中文网（）！相关文章：0点赞收藏分享：&猜你喜欢12345678910
PHP中文网：独家原创，永久免费的在线，php技术学习阵地！Copyright
All Rights Reserved | 皖B2-QQ群:关注微信公众号您的位置：> -&
-& >下载 档案号：#148114
软件授权：
软件大小：
软件语言：
软件评级：
官方主页：
更新时间：
应用平台：
复制到论坛
复制到博客
绿盟口号! 伸出你的手 - 绿色分享:
官方评级：3/159
同类软件推荐
本类下载排行canvas径向渐变详解 - 推酷
canvas径向渐变详解
var radial = c.createRadialGradient(70,70,20,130,130,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)');
c.fillStyle =
c.fillRect(0,0,500,500);
//以下是添加的辅助线
c.arc(70,70,20,0,2*Math.PI);
c.moveTo(180,130);
c.arc(130,130,50,0,2*Math.PI);
c.stroke();
效果图，so cute~
还有起始圆半径大于结束圆半径的情况，不再一一举例。
根据上面效果可知，如果起始圆不在结束圆内，被渲染部分为两个圆外切线和结束圆围成的锥形。
若要成为圆形，需保证起始圆在结束圆内部。
另外，根据html规范知：
1， r0或r1为负数，会报错。
2，若x0=x1, y0=y1, r0=r1，会跳过改步骤，不进行绘制。
求解二：渐变关系与绘制的图形的关系
以上的问题被避免了，但是绘图出现了这些形状：
前两个问题比较明显，是被截断的。如果告诉你第三个也是被截断的，你会不会相信~
第三个的确是被截断的，被圆形截断的！
为什么会被截断，就要说一下绘制图形是的注意事项了~
解第一题过程中为了避免这个问题的干扰，设置了大大的着色区域c.fillRect(0,0,500,500);
在正常圆球的基础上，使绘制区域减小c.fillRect(0,0,500,150)，便出现第一种情况。
使宽度和高度均小于圆球区域c.fillRect(0,0,300,150)，便出现第二种情况。
若绘制形状为圆形，当圆球在绘制范围内，则显示为正常球形，类似于题一中正常情况。
若圆球只有部分只绘制范围内，便会出现上图3的情况，如下代码：
var radial = c.createRadialGradient(100,100,20,120,120,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)');
c.fillStyle =
c.arc(80,100,60,0,2*Math.PI);
//以下是添加的辅助线
c.moveTo(170,120);
c.arc(120,120,50,0,2*Math.PI);
c.stroke();
辅助线效果图：
上面较大的圆为绘制区域，下面小点的是径向渐变圆。着色区域是两个圆相交的部分。
综上述，使用canvasGradient画一个正常的圆球效果，应遵循以下几点：
1. createRadialGradient()方法中，起始圆半径小于结束圆半径。
2.起始圆完全在终止圆的范围内
3.终止圆在绘制区域内
相关参考地址：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致