<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas径向渐变(发散)</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
<!--
径向渐变(发散):var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
径向渐变(发散)颜色:rg.addColorStop(offset,color)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
-->
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//同一个圆心画球形
var g1=context.createRadialGradient(200,150,0,200,150,50);
g1.addColorStop(0.1,'rgb(255,0,0)');
g1.addColorStop(1,'rgb(50,0,0)');
context.fillStyle=g1;
context.beginPath();
context.arc(200,150,100,0,Math.PI*2,false);
context.closePath();
context.fill();
//不同圆心看径向渐变模型
var g1=context.createRadialGradient(50,150,10,100,150,20);
g1.addColorStop(0.1,'rgb(240,0,2)');
g1.addColorStop(0.5,'rgb(12,200,1)');
g1.addColorStop(1,'rgb(0,2,300)');
context.fillStyle=g1;
context.fillRect(0,0,180,200);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas径向渐变(发散)</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
<!--
径向渐变(发散):var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
径向渐变(发散)颜色:rg.addColorStop(offset,color)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
-->
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//同一个圆心画球形
var g1=context.createRadialGradient(200,150,0,200,150,50);
g1.addColorStop(0.1,'rgb(255,0,0)');
g1.addColorStop(1,'rgb(50,0,0)');
context.fillStyle=g1;
context.beginPath();
context.arc(200,150,100,0,Math.PI*2,false);
context.closePath();
context.fill();
//不同圆心看径向渐变模型
var g1=context.createRadialGradient(50,150,10,100,150,20);
g1.addColorStop(0.1,'rgb(240,0,2)');
g1.addColorStop(0.5,'rgb(12,200,1)');
g1.addColorStop(1,'rgb(0,2,300)');
context.fillStyle=g1;
context.fillRect(0,0,180,200);
</script>
</body>
</html>