html5canvas好像因为脚本问题无法正常显示，但没找到原因，求指教

答案:2 悬赏:50 手机版

解决时间 2021-01-02 23:57

提问者网友：一抹荒凉废墟
2021-01-02 18:42

<!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区域，其他的就什么都没有了。不是浏览器的问题，觉得好像是脚本没有正常运作，但反复找不到问题。希望有哪位能指点一下错误出在哪？感激不敬。

最佳答案

五星知识达人网友：笑迎怀羞
2021-01-02 19:02

有三个问题：
1、createRadialGradient的参数数量不正确，最后一个逗号后面没有参数，这是语法错误；

2、createRadialGradient的参数中有canvas变量，这是一个未定义的变量；
3、你用了strokeRect来画圆，这是不带填充的，要显示出渐变效果，你需要fillRect方法；

剩下的就是具体的位置及颜色设置了；

全部回答

1楼网友：渡鹤影
2021-01-02 19:20

我是来看评论的

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！