<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>添加土地</title></head><body> <canvas id="canvas" style="margin:0 auto;"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1200; canvas.height = 800; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); // context.fillStyle = "#000"; // 背景 var skyStyle = 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(var i=0;i<200;i++){ var r = Math.random() * 5 + 5; var x = Math.random() * canvas.width; var y = Math.random() * canvas.height * 0.65; var a = Math.random() * 360; drawStar(context , x , y , r , a ) } // 月亮 fillMoon(context,2,900,200,100,30) // 土地 drawLand(context) }else{ alert('當前游覽器不支持Canvas，請更換游覽器后再試！'); } } function drawLand(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(); var landStyle = cxt.createLinearGradient(0,800,0,0); landStyle.addColorStop(0.0,'#030'); landStyle.addColorStop(1.0,'#580'); cxt.fillStyle = landStyle; cxt.fill(); cxt.restore(); } function fillMoon(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(); } function pathMoon(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(); } function dis(x1,y1,x2,y2){ return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) } function createBackgroundCanvas(){ var backCanvas = document.createElement("canvas"); backCanvas.width = 100; backCanvas.height = 100; var backCanvasContext = backCanvas.getContext('2d'); drawStar(backCanvasContext,50,50,50,0); return backCanvas } function drawStar(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() } function starPath(cxt){ cxt.beginPath(); for(var i=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>
新聞熱點
疑難解答
