接上篇,计算脚印面积小程序代码分享(压强赛课用)
- 2026-09-24 09:16:34
接上篇,计算脚印面积小程序代码分享(压强赛课用)复制代码 桌面新建文本文档 粘贴代码并保存 将文件后缀txt改为html即可使用啦 快来试试吧❤️ 点击关注，持续更新各种初中物理资料（含赛课 论文资料）👇
<!DOCTYPE html><html><head><title>8.9.11.12班小秘书</title><style>body {background: linear-gradient(135deg, #FFB6C1, #FFD1DC);min-height: 100vh;margin: 0;padding: 20px;font-family: 'Comic Sans MS', cursive;position: relative;overflow: hidden;}h1 {text-align: center;color: #FF69B4;font-size: 2.8em;text-shadow: 2px 2px white;margin: 15px 0;}#dropZone {width: 500px;height: 300px;border: 3px dashed #FF69B4;border-radius: 20px;margin: 20px auto;background: rgba(255,255,255,0.9);display: flex;align-items: center;justify-content: center;font-size: 1.5em;color: #FF69B4;transition: 0.3s;}#dropZone.dragover {background: rgba(255,255,255,0.7);transform: scale(1.02);}#resultBox {width: 200px;height: 80px;background: white;border-radius: 15px;margin: 0 auto;box-shadow: 0 0 15px rgba(255,105,180,0.3);display: flex;align-items: center;justify-content: center;font-size: 1.8em;color: #FF69B4;}.heart {position: absolute;font-size: 20px;color: #FF69B4;animation: fall 6s linear infinite;}@keyframes fall {0% { transform: translateY(-50px) rotate(0deg); }100% { transform: translateY(100vh) rotate(360deg); }}</style></head><body><!-- 飘落的心形装饰 --><divclass="heart">❤</div><divclass="heart"style="left:10%;animation-delay:1s">❤</div><divclass="heart"style="left:30%;animation-delay:2s">❤</div><h1>🌸 8.8班小秘书 🌸</h1><divid="dropZone">把方格纸图片拖到这里~<br>(支持JPG/PNG格式)</div><divid="resultBox">等待计算...</div><canvasid="canvas"hidden></canvas><script>const dropZone = document.getElementById('dropZone');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 拖拽事件处理dropZone.addEventListener('dragover', (e) => {e.preventDefault();dropZone.classList.add('dragover');});dropZone.addEventListener('dragleave', () => {dropZone.classList.remove('dragover');});dropZone.addEventListener('drop', (e) => {e.preventDefault();dropZone.classList.remove('dragover');const file = e.dataTransfer.files[0];processImage(file);});// 图像处理function processImage(file) {const img = new Image();img.onload = () => {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);analyzeGrid();}img.src = URL.createObjectURL(file);}function analyzeGrid() {const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);let gridCount = 0;// 简化版网格检测算法const gridSize = 20; // 假设每个格子20像素for(let y = 0; y < canvas.height; y += gridSize) {for(let x = 0; x < canvas.width; x += gridSize) {const pixel = ctx.getImageData(x, y, 1, 1).data;// 检测深色像素（脚印区域）if(pixel[0] < 100 && pixel[1] < 100 && pixel[2] < 100) {gridCount++;}}}// 计算面积（1格=0.1cm²=0.00001m²）const area = gridCount * 0.00001;document.getElementById('resultBox').innerHTML =`${area.toFixed(4)} m²<br><small>≈${gridCount}个小方格</small>`;}</script></body></html>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
