<!DOCTYPE html>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->
<html>
<head>
<title>放射性渐变</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#canvas {
background: #eeeeee;
border: thin solid cornflowerblue;
}
</style>
</head>
<body>
<div display='inline'>
<canvas id='canvas' width='450' height='275'>
Canvas not supported
</canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
//创建一个放射性渐变 函数原型 createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
//xStart,yStart开始圆的圆心坐标 radiusStart 开始圆的半径
//xEnd,yEnd结束圆的圆心坐标 radiusEnd结束圆的半径
gradient = context.createRadialGradient(
canvas.width / 2, canvas.height*0.8, 10,
canvas.width / 2, 0, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');
context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();
</script>
</div>
</body>
</html>
演示地址:http://sandbox.runjs.cn/show/8vxutkq1