<!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方法;
剩下的就是具体的位置及颜色设置了;