canvas에 먼가 그려져 있어야 테스트를 하니 일단 줄을 그리고
| const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // Start a new Path ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); // Draw the Path ctx.stroke(); |
[링크 : https://www.w3schools.com/jsref/canvas_lineto.asp]
여기서 나오는 waterfall display를 canvas로 간단하게 그려보려고 하니
[링크 : https://www.arc.id.au/Spectrogram.html]
간간히 아래와 같은 경고? 에러가 나지만 일단 무시하고 실행은 가능하니 나중에 찾아봐야 할 듯.
| tt.html:27 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently |
[링크 : https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently]
getImageData를 이용하여 좌상단으로 부터 가장 아래 1줄 빼고 복사하고
putImageData를 이용하여 복사한 그림을 위에 1줄 비우고 붙여넣는다.
결과적으로 가장 왼쪽 위 1픽셀은 남은채 나머지는 아래로 흘러내리는 애니메이션 완성!
| <!DOCTYPE html> <html> <head> </head> <body> <canvas id="sepctrograph" height=500 width=1800></canvas> <script> function init_canvas() { canvas = document.getElementById("sepctrograph") ctx = canvas.getContext("2d"); // Start a new Path ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); // Draw the Path ctx.stroke(); } function flow_canvas() { console.log("ing"); canvas = document.getElementById("sepctrograph") ctx = canvas.getContext("2d"); imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1); ctx.putImageData(imgObj, 0, 1); // next line draw } init_canvas(); setInterval(flow_canvas, 1000); </script> </body> </html> |
+
새로 생성하지 않고 getImageData로 받은건 이상하게 편집이 안되는 느낌이라..
그냥 높이 1짜리로 새롭게 만들어서, 가장 위에 한줄 넣는게 무난한 듯.
| const myImageData = ctx.createImageData(width, height); |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas]
'Programming > javascript & HTML' 카테고리의 다른 글
| 숫자에 콤마 찍기(자릿수 표현) (0) | 2023.07.27 |
|---|---|
| canvas 없는 getcontext (0) | 2023.07.12 |
| javascript 정수는 정수가 아니다 (0) | 2023.04.06 |
| websocket binarytype (0) | 2023.04.04 |
| 자바스크립트 소수점 자르기 (0) | 2023.03.13 |
