                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

createRadialGradient 渐变色

<!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>