2025年星空代码

科技前沿 • 2025-04-04 11:09 • 阅读 18
大家好，我是讯享网，很高兴认识大家。
讯享网<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>满天星</title> <title>曲线</title> <style> body { } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </style> </head> <body> <div id="canvas-warp"> <canvas id="canvas"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> <script> window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); var sky = context.createLinearGradient(0, 0, 0, canvas.height); sky.addColorStop(0.0, "#000"); sky.addColorStop(1.0, "#035"); context.fillStyle = sky; context.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < 200; i++) { var R = Math.random() * 10 + 10; var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var rot = Math.random() * 360; drawStar(context, x, y, R/2.0, R, rot); drawMoon(context, 200, 100, 200, 400, 1200, 400); context.lineWidth = 3; context.strokeStyle = "yellow"; context.fillStyle = "yellow"; context.stroke(); context.fill(); } }; function drawStar(cxt, x, y, r, R, rot) { cxt.beginPath(); for (var i = 0; i < 200; i++) { cxt.lineTo( Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y ); cxt.lineTo( Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y ); } cxt.closePath(); cxt.lineWidth = 2; cxt.lineCap = "round"; cxt.strokeStyle = "#FCFF7D"; cxt.fillStyle = "yellow"; cxt.fill(); cxt.stroke(); } function drawMoon(cxt, x1, y1, x2, y2 ,x3, y3) { cxt.beginPath(); cxt.arc((x2 + x1) / 2, (y2 + y1) / 2, (y2 - y1) / 2, Math.PI * 0.5, Math.PI * 1.5, true); cxt.arcTo(x3, y3, x2, y2, (y2 - y1) / 2 / (x3 - x1) * dis(x1, y1, x3, y3)); cxt.closePath();} function dis(x1, y1, x2, y2) { return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); } </script> </body> </html>
讯享网
2025年星空代码

相关推荐
