canvas createRadialGradient()

2018-11-30 21:50| 作者: admin| 查看: 1058| 评论: 0|来自: 蚂蚁部落

createRadialGradient方法可以创建一个径向渐变。

与镜像渐变对应的是线性渐变,颜色沿着一条轴线方向有规则过渡。

而镜像渐变则是颜色从中心向外辐射型有规则过渡。

语法结构:

[JavaScript] 纯文本查看 复制代码
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数解析:

(1).(x0,y0):规定渐变起点圆的圆心坐标。

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

(3).(x1,y1):规定渐变终点圆的圆心坐标。

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

createRadialGradient方法的返回值是一个渐变对象。

下面对概念进一步分析,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215107dropisiwwsbi6ibi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

黄色是渐变起点圆,紫色是渐变终点圆,不要想当然认为渐变是从起点圆的圆心开始的。

渐变区域事实是从起点圆外层开始,也就是上图黄色双向箭头指示的区域。

到这里,可能还是对此方法的使用不够清晰,不用担心,后面有详细的代码实例演示。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例如下:

[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>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext('2d');
  let gnt = ctx.createRadialGradient(200, 300, 20, 200, 300, 100);
  gnt.addColorStop(0, 'green');
  gnt.addColorStop(0.5, 'red');
  gnt.addColorStop(1, 'blue');
  ctx.fillStyle = gnt;
  ctx.arc(200, 300, 130, 0, 2 * Math.PI);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="cs" width="800" height="600"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215141p96izvdtms7477bu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).createRadialGradient方法创建一个渐变对象。

(2).通过addColorStop方法添加两个渐变颜色并划分渐变区域,将整段渐变区域看做1,那么0-0.5区域由绿色渐变到红色,0.5-1区域由红色渐变到蓝色。渐变起点之前的区域由纯绿色填充,渐变终点之后区域由蓝色填充。

(3).渐变对象不能单独存在,需要填充到其他图案,或者作为描边。

上述代码中,渐变起点圆与终点圆圆心重合,所以渐变看起来非常的规则,当然也可以不重合。

关于addColorStop方法更多内容参阅canvas addColorStop()一文。

代码实例如下:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/215233zznxs5ln8aaw4lii.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码中,起点圆与终点圆圆心并不重合,所以渐变开起来没有那么规整。

最后特别说明一下,起点圆半径如果大于终点圆,那么就是由外向内进行渐变,很容易理解。

本文就不再演示,感兴趣的朋友可以自行测试一下。


鲜花

握手

雷人

路过

鸡蛋
返回顶部