canvas实现电闪雷鸣狂风暴雨的森林树木摇摆下雨动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现电闪雷鸣狂风暴雨的森林树木摇摆下雨动画效果代码
代码标签: canvas 电闪雷鸣 狂风暴雨 森林 树木 摇摆 下雨 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; transition: background 0.1s ease-in-out; } canvas { display: block; } button { position: absolute; top: 10px; left: 10px; z-index: 10; padding: 10px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } </style> </head> <body> <canvas id="mainCanvas"></canvas> <script> const canvas = document.getElementById("mainCanvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Raindrop parameters const maxRaindrops = 200; let raindrops = []; class Raindrop { constructor(x, y, length, speed) { this.x = x !== undefined ? x : Math.random() * canvas.width; this.y = y !== undefined ? y : Math.random() * canvas.height; this.length = length !== undefined ? length : Math.random() * 20 + 10; this.speed = speed !== undefined ? speed : Math.random() * 10 + 5; // Increased speed } fall() { this.y += this.speed; if (this.y > canvas.height) { this.y = 0 - this.length; this.x = Math.random() * canvas.width; this.speed = Math.random() * 10 + 5; // Increased speed this.length = Math.random() * 20 + 10; } } draw() { ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, this.y + this.length); ctx.strokeStyle = "blue"; ctx.lineWidth = 2; ctx.stroke(); }} // Lightning parameters const numSegments = 10; const segmentWidth = 10; // Smaller segment width for more vertical lines const maxAmplitude = canvas.width / 6; // Control the horizontal amplitude let offset = 0; // Function to draw a single lightning bolt function drawLightning(xStart) { const width = canvas.width; const height = canvas.height; ctx.beginPath(); ctx.moveTo(xStart, 0); let x = xStart, y = 0; for (let i = 0; i < numSegments; i++) { y += segmentWidth; x = xStart + Math.sin(offset + i) * (Math.random() * maxAmplitude); ctx.lineTo(x, y); // Draw tendrils if (Math.random() > 0.7) { drawTendril(x, y); } } ctx.lineTo(x, height); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.stroke(); offset += 0.1; } // Function to draw tendrils function drawTendril(x, y) { const tendrilLength = Math.random() * 50 + 50; const angle = Math.random() * Math.PI - Math.PI / 2; const tendrilX = x + Math.cos(angle) * tendrilLength; const tendrilY = y + Math.sin(angle) * tendrilLength; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(tendrilX, tendrilY); ctx.strokeStyle = "white"; ctx.lineWidth = 1; ctx.stroke(); } // Function to trigger multiple lightning strik.........完整代码请登录后点击上方下载按钮下载查看
网友评论0