canvas createRadialGradient() 径向渐变

2018-8-9 08:59| 作者: admin| 查看: 509| 评论: 0|来自: 蚂蚁部落

径向渐变就是从起点到终点颜色进行圆形渐变。

推荐参阅教程板块canvas createLinearGradient()一文。

语法结构:

[JavaScript] 纯文本查看 复制代码
createRadialGradient(x1,y1,r1,x2,y2,r2)

参数解析:

(1).x1,y1:规定渐变起点圆心坐标。

(2).r1:规定渐变起点圆的半径尺寸。

(3).x2,y2:规定渐变终点圆心坐标。

(4).r2:规定渐变终点圆的半径尺寸。

既然是颜色的渐变,那么就需要添加颜色,使用addColorStop方法即可实现。

addColorStop()方法具有两个参数,第一个参数规渐变颜色的起点位置,第二个参数规定渐变颜色。

先看一个图示:

a:3:{s:3:\"pic\";s:43:\"portal/201808/09/090140uqp0zcvq9htb9pbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可能不少朋友想当然的认为,渐变是从起点圆心开始,到终点圆外层结束。事实并非如此,渐变区域是紫色之间的区域。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext('2d');
  var gnt = ctx.createRadialGradient(200, 300, 50, 200, 200, 200);
  gnt.addColorStop(0, 'green');
  gnt.addColorStop(0.3, 'blue');
  gnt.addColorStop(1, 'red');
  ctx.fillStyle = gnt;
  ctx.arc(200, 300, 200, 0, 2 * Math.PI);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

上面的代码实现了径向渐变的演示,下面对代码做一下分析。

代码分析:

(1).添加了绿色、蓝色和红色为渐变颜色。

(2).划分渐变的区域是渐变开始圆的外缘到渐变结束圆外缘,也就是上面图片紫色之间的区域。如果这段区域整体为1,那么0.3就是百分之30处。0-0.3是由绿色渐变为蓝色,0.3-1是由蓝色渐变为红色。

(3).addColorStop()方法的调用对象并不是绘图环境对象,而是createRadialGradient()方法的返回对象。

(4).渐变的起点之前和渐变的终点之后填充对应的起点纯色和终点纯色。

特别说明:如果起点圆的半径大于终点圆的半径,那么就反过来变成从外到内的渐变。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部