<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制一片星空</title>
</head>
<body>
<canvas id="canvas" style="border:1px black solid;display:block;margin:0 auto;">该浏览器不支持canvas配件</canvas>
<script>
var canvas=document.getElementById("canvas");
canvas.width=700;
canvas.height=500;
var context=canvas.getContext("2d");
//径向渐变，设置背景
setBack(context);
function setBack(cxt){
var x=cxt.createRadialGradient(351,500,0,350,500,500);
x.addColorStop(0.0,"#035")
x.addColorStop(1.0,"black");
context.fillStyle=x;
context.fillRect(0,0,700,500);
}
//绘制星星
addStar(context);
function addStar(cxt){
for(var i=0;i<100;i++){
var x=Math.random()*700;
var y=Math.random()*300;
var deg=Math.random()*Math.PI*2;
// var sx=Math.random()*2;
// var sy=Math.random()*2;
cxt.save();
cxt.translate(x,y);
cxt.rotate(deg);
//cxt.scale(sx,sy);//没有必要的缩放，效果也不对,并没有缩放大小，不是预想中的效果
drawStar(cxt);
cxt.stroke();
cxt.fillStyle="yellow";
cxt.fill();
cxt.restore();
}
}
// drawStar(context);
function drawStar(cxt){
var R=10;
var r=5;
var deg=18;
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(R*Math.cos((deg+i*72)/360*2*Math.PI),-R*Math.sin((deg+i*72)/360*2*Math.PI));
cxt.lineTo(r*Math.cos((deg+36+i*72)/360*2*Math.PI),-r*Math.sin((deg+36+i*72)/360*2*Math.PI));
}
cxt.closePath();
}
//绘制月亮
drawMoon(context);
function drawMoon(cxt){
cxt.save();
cxt.translate(500,150);
cxt.rotate(Math.PI/6);
cxt.beginPath();
cxt.arc(0,0,100,Math.PI*0.5,Math.PI*1.5,true);
cxt.moveTo(0,-100);
cxt.quadraticCurveTo(80,0,0,100);
cxt.closePath();
cxt.fillStyle="yellow";
cxt.fill();
cxt.restore();
}
//绘制弯曲的地面
drawGround(context);
function drawGround(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,350);
cxt.bezierCurveTo(340,300,350,500,700,350);
cxt.lineTo(700,500);
cxt.lineTo(0,500);
cxt.closePath();
//绘制地面时出现问题
var landstyle=cxt.createLinearGradient(0,500,0,0);
landstyle.addColorStop=(0.0,'#030');
landstyle.addColorStop=(1.0,'#580');
cxt.fillStyle=landstyle;
cxt.fill();
cxt.restore();
}
</script>
</body>
</html>
兄弟啊。。。addColorStop不是属性 是方法
landstyle.addColorStop(0,'#030');
landstyle.addColorStop(1,'#580');
这样就可以了
哦哦，我知道了
为什么我这样写没有渐变呢
landStyle.addColorStop(0.0,"#030");
landStyle.addColorStop(1.0,"#000");