Canvas 放射渐变 ( RadialGradient )

放射渐变 ( RadialGradient ) 就是从一个颜色值以一个点为中心向四周扩散到另一个颜色值

Canvas 使用 createRadialGradient() 方法创建一个线性渐变

createRadialGradient()

createRadialGradient() 根据参数确定两个圆的坐标,绘制放射性渐变,并返回一个渐变 CanvasGradient 对象

语法

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数 说明
x0 开始圆形的 x 轴坐标
y0 开始圆形的 y 轴坐标
r0 开始圆形的半径
x1 结束圆形的 x 轴坐标
y1 结束圆形的 y 轴坐标
r1 结束圆形的半径

放射渐变的使用方法

  1. 使用 createRadialGradient() 方法创建一个指定了开始和结束点的 CanvasGradient 对象

  2. 创建成功后,可以使用 CanvasGradient.addColorStop()方法添加起始色标

  3. 然后把渐变对象赋值给 strokeStyle 或者 fillStyle 属性

范例

使用 createRadialGradient() 创建一个放射渐变

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>

<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"green");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);
</script>

运行结果如下



范例 2

我们绘制一个具有 3D 效果的圆球

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="200">
</canvas>
</div>
<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");


// 创建渐变
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

// 画图形
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
</script>

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.