前端页面效果收集

数字雨

<canvas id="matrix"></canvas>
<script>const canvas = document.getElementById('matrix');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const chars = '01';const drops = Array(Math.floor(canvas.width / 20)).fill(0);function draw() {ctx.fillStyle = 'rgba(0,0,0,0.05)';ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = '#0F0';drops.forEach((drop, i) => {ctx.fillText(chars[Math.random() > 0.5 ? 0 : 1], i * 20, drop);drops[i] = drop > canvas.height ? 0 : drop + 20;});}setInterval(draw, 100);
</script>

元素融化动画

<div onclick="melt(this)" style="cursor:pointer; padding:20px; background:#ff6666;"> 点击融化！</div>
<script>function melt(element) {let pos = 0;const meltInterval = setInterval(() => {element.style.borderRadius = `${pos}px`;element.style.transform = `skew(${pos}deg) scale(${1 - pos/100})`;element.style.opacity = 1 - pos / 100;pos += 2;if (pos > 100) clearInterval(meltInterval);}, 50);}
</script>

电子签名

<style>* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100vh;width: 100vw;background-color: #f0f0f0;overflow: hidden;}canvas {border: 1px solid #000;background-color: #fff;}.controls {margin-top: 10px;display: flex;gap: 10px;}button,select {padding: 5px 10px;cursor: pointer;}
</style><!-- 画板 --><canvas id="signature-pad"  width="400" height="200"></canvas><!-- 控制器 --><div ><select id="stroke-style" ><option value="pen">钢笔</option><option value="brush">毛笔</option></select><button id="clear" >清空</button><button id="export">导出图片</button></div><script>document.addEventListener('DOMContentLoaded', () => {// 获取 canvas 元素和其 2D 上下文const canvas = document.getElementById('signature-pad');const ctx = canvas.getContext('2d');let drawing = false; // 标志是否正在绘制let lastX = 0, lastY = 0; // 保存上一个点的坐标let strokeStyle = 'pen'; // 初始笔画样式// 开始绘制的函数const startDrawing = (e) => {e.preventDefault(); // 阻止默认行为，避免页面滚动drawing = true; // 设置为正在绘制ctx.beginPath(); // 开始新路径// 记录初始点的位置const { offsetX, offsetY } = getEventPosition(e);lastX = offsetX;lastY = offsetY;ctx.moveTo(offsetX, offsetY); // 移动画笔到初始位置};// 绘制过程中的函数const draw = (e) => {e.preventDefault(); // 阻止默认行为，避免页面滚动if (!drawing) return; // 如果不是在绘制，直接返回// 获取当前触点位置const { offsetX, offsetY } = getEventPosition(e);// 使用贝塞尔曲线进行平滑过渡绘制ctx.quadraticCurveTo(lastX,lastY,(lastX + offsetX) / 2,(lastY + offsetY) / 2);ctx.stroke(); // 实际绘制路径// 更新上一个点的位置lastX = offsetX;lastY = offsetY;};// 停止绘制的函数const stopDrawing = (e) => {e.preventDefault(); // 阻止默认行为drawing = false; // 结束绘制状态};// 获取事件中触点的相对位置const getEventPosition = (e) => {// 鼠标事件或者触摸事件中的坐标const offsetX = e.offsetX || e.touches[0].clientX - canvas.offsetLeft;const offsetY = e.offsetY || e.touches[0].clientY - canvas.offsetTop;return { offsetX, offsetY };};// 绑定鼠标事件const bindMouseEvents = () => {canvas.addEventListener('mousedown', startDrawing);canvas.addEventListener('mousemove', draw);canvas.addEventListener('mouseup', stopDrawing);canvas.addEventListener('mouseout', stopDrawing);};// 绑定触摸事件const bindTouchEvents = () => {canvas.addEventListener('touchstart', startDrawing);canvas.addEventListener('touchmove', draw);canvas.addEventListener('touchend', stopDrawing);canvas.addEventListener('touchcancel', stopDrawing);};// 清除画布的功能const clearCanvas = () => {document.getElementById('clear').addEventListener('click', () => {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空整个画布});};// 修改笔画样式的功能const changeStrokeStyle = () => {document.getElementById('stroke-style').addEventListener('change', (e) => {strokeStyle = e.target.value; // 获取选中的笔画样式updateStrokeStyle(); // 更新样式});};// 根据 strokeStyle 更新笔画样式const updateStrokeStyle = () => {if (strokeStyle === 'pen') {ctx.lineWidth = 2; // 细线条ctx.lineCap = 'round'; // 线条末端圆角} else if (strokeStyle === 'brush') {ctx.lineWidth = 5; // 粗线条ctx.lineCap = 'round'; // 线条末端圆角}};// 导出图片的功能const exportImage = () => {document.getElementById('export').addEventListener('click', () => {// 创建临时 canvasconst tempCanvas = document.createElement('canvas');tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;const tempCtx = tempCanvas.getContext('2d');// 绘制白色背景tempCtx.fillStyle = 'white';tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);// 将原画布内容绘制到临时画布上tempCtx.drawImage(canvas, 0, 0);const dataURL = tempCanvas.toDataURL('image/png');const link = document.createElement('a');link.href = dataURL;link.download = 'signature.png';link.click();});};// 初始化const init = () => {bindMouseEvents();bindTouchEvents();clearCanvas();changeStrokeStyle();updateStrokeStyle();exportImage();};init();});
</script>

共享屏幕

<button>共享屏幕</button>
<script>const button = document.querySelector("button");button.addEventListener("click", async () => {const stream = await navigator.mediaDevices.getDisplayMedia({video: true,});const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")? "video/webm;codecs=h264": "video/webm";const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });const chunks = [];mediaRecorder.addEventListener("dataavailable", function (e) {chunks.push(e.data);});mediaRecorder.addEventListener("stop", () => {const blob = new Blob(chunks, { type: chunks[0].type });const url = URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = "video.webm";a.click();});mediaRecorder.start();});
</script>