<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>添加土地</title></head><body><canvasid="canvas"style="margin:0 auto;">The current browser does not support Canvas, can replace the browser a try!</canvas><script>window.onload=function(){varcanvas=document.getElementById('canvas');
canvas.width=1200;
canvas.height=800;if(canvas.getContext('2d')){varcontext=canvas.getContext('2d');//context.fillStyle = "#000";//背景varskyStyle=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
skyStyle.addColorStop(0.0,'#035');
skyStyle.addColorStop(1.0,'black');
context.fillStyle=skyStyle;
context.fillRect(0,0,canvas.width,canvas.height)//星星for(vari=0;i<200;i++){varr=Math.random()*5+5;varx=Math.random()*canvas.width;vary=Math.random()*canvas.height*0.65;vara=Math.random()*360;
drawStar(context , x , y , r , a )
}//月亮fillMoon(context,2,900,200,100,30)//土地drawLand(context)
}else{
alert('当前游览器不支持Canvas，请更换游览器后再试！');
}
}functiondrawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,600);
cxt.bezierCurveTo(540,400,660,800,1200,600);
cxt.lineTo(1200,800);
cxt.lineTo(0,800);
cxt.closePath();varlandStyle=cxt.createLinearGradient(0,800,0,0);
landStyle.addColorStop(0.0,'#030');
landStyle.addColorStop(1.0,'#580');
cxt.fillStyle=landStyle;
cxt.fill();
cxt.restore();
}functionfillMoon(cxt,d,x,y,R,rot,fillColor){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot*Math.PI/180);cxt.scale(R,R);
pathMoon(cxt,d);
cxt.fillStyle=fillColor||"#fb5";
cxt.fill();
cxt.restore();
}functionpathMoon(cxt,d){
cxt.beginPath();
cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
moveTo(0,-1);
cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);cxt.closePath();
}functiondis(x1,y1,x2,y2){returnMath.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
}functioncreateBackgroundCanvas(){varbackCanvas=document.createElement("canvas");
backCanvas.width=100;
backCanvas.height=100;varbackCanvasContext=backCanvas.getContext('2d');
drawStar(backCanvasContext,50,50,50,0);returnbackCanvas
}functiondrawStar(cxt,x,y,R,rot){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);cxt.scale(0.05*R,0.05*R)
starPath(cxt);
cxt.fillStyle="#fb3";
cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();
cxt.restore()
}functionstarPath(cxt){
cxt.beginPath();for(vari=0;i<5;i++){
cxt.lineTo(Math.cos( (18+i*72)/180*Math.PI )*20,-Math.sin( (18+i*72)/180*Math.PI )*20);
cxt.lineTo(Math.cos( (54+i*72)/180*Math.PI )*0.5*20,-Math.sin( (54+i*72)/180*Math.PI )*0.5*20);
}
cxt.closePath();
}</script></body><script>/*图形变换
位移 translate(x,y)
旋转 rotate(deg)
缩放 scale(sx,sy)*/</script></html>