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]
간간히 아래와 같은 경고? 에러가 나지만 일단 무시하고 실행은 가능하니 나중에 찾아봐야 할 듯.
[링크 : 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]
