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);