수학도장 필기노트가 필요하신분 보세요!

밑에 붙여넣기 코드!

javascript:(()=>{const id='md-note';document.getElementById(id)?.remove();document.getElementById('md-style')?.remove();const d=document.createElement('div');d.id=id;Object.assign(d.style,{position:'fixed',left:'12px',top:'80px',width:'320px',height:'400px',zIndex:'2147483647',background:'rgba(255,255,255,1)',border:'3px solid #ffdf00',boxSizing:'border-box',display:'flex',flexDirection:'column',color:'#111',font:'14px sans-serif',overflow:'hidden',borderRadius:'0'});d.innerHTML=<div id="md-head" style="background:#222;color:white;padding:8px;display:flex;align-items:center;gap:5px;border-bottom:2px solid #ffdf00;touch-action:none"><b style="flex:1">수학도장 필기</b><button id="md-minus">−</button><button id="md-plus">+</button><button id="md-close">×</button></div><div style="padding:6px;display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #bbb"><button id="md-pen">펜</button><button id="md-eraser">지우개</button><button id="md-undo">실행 취소</button><button id="md-clear">전체 지우기</button></div><div style="padding:6px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #bbb"><label>색</label><input id="md-color" type="color" value="#111111"><label>굵기</label><input id="md-width" type="range" min="1" max="12" value="3" style="width:65px"></div><div style="padding:6px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #bbb"><label>투명도</label><input id="md-opacity" type="range" min="10" max="100" value="100" style="flex:1"><span id="md-val">100%</span></div><canvas id="md-canvas" style="display:block;flex:1;width:100%;min-height:0;touch-action:none;background:rgba(255,255,255,1)"></canvas><div style="padding:5px;font-size:11px;border-top:1px solid #bbb">제목 드래그: 이동 · +/−: 크기 조절</div>;document.body.appendChild(d);const style=document.createElement('style');style.id='md-style';style.textContent='#md-note button{border:1px solid #555;border-radius:0;background:#f5f5f5;color:#111;padding:7px 9px;min-height:32px;font-size:13px;touch-action:manipulation}#md-note input{accent-color:#d9b900}';document.head.appendChild(style);const c=d.querySelector('canvas'),ctx=c.getContext('2d');let strokes=[],cur=null,erase=false;try{strokes=JSON.parse(localStorage.getItem('md-strokes')'[]')}catch{}function save(){try{localStorage.setItem('md-strokes',JSON.stringify(strokes))}catch{}}function draw(s){if(!s?.points.length)return;ctx.beginPath();ctx.strokeStyle=s.color;ctx.fillStyle=s.color;ctx.lineWidth=s.width;ctx.lineCap='round';ctx.lineJoin='round';ctx.moveTo(s.points[0].x,s.points[0].y);s.points.slice(1).forEach(p=>ctx.lineTo(p.x,p.y));if(s.points.length===1){ctx.arc(s.points[0].x,s.points[0].y,s.width/2,0,Math.PI*2);ctx.fill()}else ctx.stroke()}function redraw(){const r=c.getBoundingClientRect();ctx.clearRect(0,0,r.width,r.height);strokes.forEach(draw)}function fit(){const r=c.getBoundingClientRect();if(!r.width!r.height)return;c.width=Math.round(r.width*devicePixelRatio);c.height=Math.round(r.height*devicePixelRatio);ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);redraw()}function pt(e){const r=c.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top}}c.addEventListener('pointerdown',e=>{e.preventDefault();c.setPointerCapture(e.pointerId);cur={points:[pt(e)],color:erase?'rgba(255,255,255,1)':d.querySelector('#md-color').value,width:+d.querySelector('#md-width').value};strokes.push(cur);draw(cur);save()});c.addEventListener('pointermove',e=>{if(!cur)return;e.preventDefault();cur.points.push(pt(e));draw(cur);save()});['pointerup','pointercancel'].forEach(ev=>c.addEventListener(ev,()=>cur=null));d.querySelector('#md-pen').onclick=()=>erase=false;d.querySelector('#md-eraser').onclick=()=>erase=true;d.querySelector('#md-undo').onclick=()=>{strokes.pop();redraw();save()};d.querySelector('#md-clear').onclick=()=>{if(confirm('필기를 모두 지울까?')){strokes=[];redraw();save()}};d.querySelector('#md-close').onclick=()=>{d.remove();style.remove()};d.querySelector('#md-plus').onclick=()=>{d.style.width=Math.min(innerWidth-8,d.offsetWidth+40)+'px';d.style.height=Math.min(innerHeight-8,d.offsetHeight+40)+'px';setTimeout(fit,50)};d.querySelector('#md-minus').onclick=()=>{d.style.width=Math.max(220,d.offsetWidth-40)+'px';d.style.height=Math.max(220,d.offsetHeight-40)+'px';setTimeout(fit,50)};d.querySelector('#md-opacity').oninput=e=>{const v=Number(e.target.value)/100;d.querySelector('#md-val').textContent=Math.round(v*100)+'%';d.style.background='rgba(255,255,255,'+v+')';c.style.background='rgba(255,255,255,'+v+')';d.querySelectorAll('#md-note > div').forEach(el=>{if(el.id==='md-head')el.style.background='rgba(34,34,34,'+v+')';else el.style.background='rgba(255,255,255,'+v+')'})};let drag=null;const h=d.querySelector('#md-head');h.addEventListener('pointerdown',e=>{if(e.target.closest('button'))return;e.preventDefault();drag={x:e.clientX-d.offsetLeft,y:e.clientY-d.offsetTop};try{h.setPointerCapture(e.pointerId)}catch{}});h.addEventListener('pointermove',e=>{if(!drag)return;e.preventDefault();d.style.left=Math.max(0,Math.min(innerWidth-d.offsetWidth,e.clientX-drag.x))+'px';d.style.top=Math.max(0,Math.min(innerHeight-d.offsetHeight,e.clientY-drag.y))+'px'});['pointerup','pointercancel','lostpointercapture'].forEach(ev=>h.addEventListener(ev,()=>drag=null));requestAnimationFrame(fit)})()