<!DOCTYPE html>
<html>
<head>
<style>
#canvas{
background:#eeeeee;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
var con=c.getContext("2d");
var jianbian=con.createRadialGradient(0,canvas.height/2,10,canvas.width,height/2,50,);
jianbian.addColorStop(0,"blue");
jianbian.addColorStop(0.2,"red");
jianbian.addColorStop(0.4,"purple");
jianbian.addColorStop(0.6,"yellow");
jianbian.addColorStop(0.8,"white");
jianbian.addColorStop(1,"red");
con.fillStyle=jianbian;
con.fill();
con.lineJoin="round";
con.lineWidth=15;
con.strokeStyle="yellow";
con.strokeRect(0,100,200,200);
}
</script>
<canvas id="canvas" width="400" height="400">
</canvas>
</body>
</html>
我是javascript canvas初学想尝试下学的渐变效果，但运行这段代码后只能看到有底色的CANVAS区域，其他的就什么都没有了。不是浏览器的问题，觉得好像是脚本没有正常运作，但反复找不到问题。希望有哪位能指点一下错误出在哪？感激不敬。
1、createRadialGradient的参数数量不正确，最后一个逗号后面没有参数，这是语法错误；
2、createRadialGradient的参数中有canvas变量，这是一个未定义的变量；
3、你用了strokeRect来画圆，这是不带填充的，要显示出渐变效果，你需要fillRect方法；
剩下的就是具体的位置及颜色设置了；
