一、描述
模仿星空后黎明到来,日出的场景
二、代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="" charset="utf-8"> </head> <body style="margin:0;padding:0;"> <canvas id="demo"></canvas> </body> <script type="text/javascript"> var moonX = 300; var moonY = 150; var moonR = 100; window.onload = function(){ var canvas = document.getElementById(‘demo‘); canvas.width = window.screen.width; canvas.height = 1600; var ctx = canvas.getContext(‘2d‘); var linearGradient = ctx.createLinearGradient(0,0,0,1600); linearGradient.addColorStop(0, "black"); linearGradient.addColorStop(0.65, "#035"); linearGradient.addColorStop(0.8, "orange"); linearGradient.addColorStop(1, "pink"); ctx.fillStyle = linearGradient; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.arc(moonX,moonY,moonR,Math.PI * 0,Math.PI *2,true); ctx.closePath(); ctx.fill(); for(var i = 0 ; i < 50 ; i++){ var r = Math.random() * 10 + 5; var x = Math.random() * canvas.width; var y = Math.random() * canvas.height * 0.25; var a = Math.random() * 360; if((x<(moonX + moonR)) && (x > (moonX - moonR)) && (y < (moonY + moonR)) &&(y > (moonY - moonR))){ continue; } drawStar(ctx,x,y,r,a); } drawSun(ctx); } function drawSun(ctx){ var canvas = ctx.canvas; var sunX = canvas.width * 0.5; var sunY = canvas.height + moonR; var interval = setInterval(function(){ ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(sunX,sunY,moonR,Math.PI * 0,Math.PI *2,true); ctx.closePath(); ctx.fill(); sunY = sunY - 10; if(sunY < canvas.height){ clearInterval(interval); drawText(ctx,"新的一天开始啦!",canvas.width * 0.65,canvas.height * 0.95); } },500); } function drawText(ctx,text,x,y){ ctx.fillStyle = "yellow"; ctx.font="30px Arial"; ctx.textAlign="start"; ctx.fillText(text,x,y); } function drawStar(ctx,x,y,r,rot){ ctx.save(); ctx.translate(x,y); ctx.rotate(rot/180 *Math.PI); ctx.scale(r,r); starPath(ctx); ctx.fillStyle = "#fb3"; //ctx.strokeStyle = "#fd5"; //ctx.lineWidth = 3 ; //ctx.lineJoin = "round"; ctx.fill(); // ctx.stroke(); ctx.restore(); } function starPath(ctx){ ctx.beginPath(); for(var i = 0 ; i < 5 ; i ++){ ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI), -Math.sin((18 + i*72)/180 * Math.PI)); ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI) * 0.5, -Math.sin((54+ i*72)/180 * Math.PI) * 0.5); } ctx.closePath(); } </script> </html>
时间: 2024-10-04 00:29:23