HTML5创建一个径向/圆渐变

1、设计源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5创建一个径向/圆渐变</title>
<script type="text/javascript">
    /**
	 * 创建一个径向/圆渐变
	 */
	function drawCircle()
	{
		//找到<canvas>元素
		var canvas = document.getElementById("canvas");
		//创建context对象
		var ctx = canvas.getContext("2d");
		//创建一个径向/圆渐变
		var gradient = ctx.createRadialGradient(200,200,5,90,60,200);
		//方法规定 gradient 对象中的颜色和位置
		gradient.addColorStop(0,"yellow");
		//方法规定 gradient 对象中的颜色和位置
		gradient.addColorStop(1,"blue");
		//设置填充样式
		ctx.fillStyle = gradient;
		//填充一个矩形区域
		ctx.fillRect(40,20,600,400);
	}
</script>
</head>

<body onLoad="drawCircle();">
   <canvas id="canvas" width="1000" height="800"></canvas>
</body>
</html>

2、实现结果

3、源码说明

（1）找到canvas元素

var canvas = document.getElementById("canvas");

（2）创建context元素

var ctx = canvas.getContext("2d");

（3）创建一个径向/圆渐变

var gradient = ctx.createRadialGradient(200,200,5,90,60,200);

（4）规定 gradient 对象中的颜色和位置

gradient.addColorStop(0,"yellow");

（5）设置填充样式

ctx.fillStyle = gradient;

（6）填充一个矩形区域

ctx.fillRect(40,20,600,400);