#trail-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999999; } const canvas = document.getElementById('trail-canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let isDrawing = false; let points = []; const lines = []; window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); document.addEventListener('mousedown', (e) => { isDrawing = true; points = [{x: e.clientX, y: e.clientY, time: Date.now()}]; }); document.addEventListener('mouseup', () => { isDrawing = false; if (points.length > 0) { lines.push({points: [...points], time: Date.now()}); points = []; } }); document.addEventListener('mouseleave', () => { isDrawing = false; if (points.length > 0) { lines.push({points: [...points], time: Date.now()}); points = []; } }); document.addEventListener('mousemove', (e) => { if (!isDrawing) return; points.push({x: e.clientX, y: e.clientY, time: Date.now()}); }); // פונקציה לציור קו חלק עם עקומות function drawSmoothLine(pts, alpha) { if (pts.length < 2) return; ctx.globalAlpha = alpha; ctx.strokeStyle = '#FD9390'; ctx.lineWidth = 6; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.filter = `blur(${(1 - alpha) * 3}px)`; ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i 1) { ctx.lineTo(pts[pts.length - 1].x, pts[pts.length - 1].y); } ctx.stroke(); ctx.globalAlpha = 1; ctx.filter = 'none'; } // אנימציה function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); const now = Date.now(); // ציור הקו הנוכחי if (isDrawing && points.length > 1) { drawSmoothLine(points, 0.9); } // ציור כל הקווים עם דעיכה for (let i = lines.length - 1; i >= 0; i--) { const line = lines[i]; const age = now - line.time; const maxAge = 2000; // 2 שניות if (age > maxAge) { lines.splice(i, 1); } else { const alpha = 0.9 * (1 - age / maxAge); drawSmoothLine(line.points, alpha); } } requestAnimationFrame(animate); } animate();