createRadialGradient 渐变色-慕课网

createRadialGradient 渐变色

来源：5-2 径向渐变

又一个老白

2016-01-12 17:31

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #dcdcdc"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
canvas.height=800;
canvas.width=800;
var context=canvas.getContext("2d");

var gradient2=context.createRadialGradient(400,400,100,400,400,400);
gradient2.addColorStop(0,"white");
gradient2.addColorStop(0.25,"yellow");
gradient2.addColorStop(0.5,"red");
gradient2.addColorStop(1,"blue");
gradient2.fillStyle=gradient2;
context.fillRect(0,0,800,800);

</script>
</body>
</html>