킹바구니 🦜

움짤처럼 마우스로 캔버스 클릭 시 그 부분이 중심점이 되어 자동으로 원이 그려지고 다른 곳 클릭 시 원 하나가 확정되어 그려짐. 이후 다른 중심점을 잡으면 새로운 원도 그리면서 동시에 원래 그렸던 원도 기억해서 그려주는 내용임. 캔버스는 도대체 어떻게 작동이 되나 싶었는데 원리가 기존 원을 냅두고 새로 그리는게 아니라 싹 지워버리고 다시 다 그리는 것이였음... https://codepen.io/pmx/pen/qBvZQOV 마우스 위치에 따라 모양 그리고 기억하기 ... codepen.io 이건 진짜 새발의 피고 파면 팔수록 진짜 어렵다 이런 인터렉션.....

위에 짤처럼 뒤에 배경이 있고(canvas에 심은 배경은 아님) 그 위에 있는 canvas에 열심히 그리기 기능을 써서 마우스로 끄적끄적 해놓은 것을 지우고 싶을때 뒤에 배경은 두고 내가 그린 선만 지워지는 기능은 없나 싶었는데(마치 포토샵의 layer같은 그런거) 다행히 아주 쉽게 구현이 가능했음. 1. globalCompositeOperation 설정 ctx.globalCompositeOperation = "destination-out"; ctx.strokeStyle = "#FFC300"; 지우기 모드에 들어갔을때 위처럼 destination-out으로 설정해두고 지우개 색깔을 설정해두면 된다. 나같은 경우 노트패드처럼 노란 배경에 줄이 쫙쫙 그어져있는 배경 위에 캔버스로 그리는거라 지우개 색깔을 노..

input으로 불러온 img를 canvas에 보여주려고 했는데 간헐적으로 이미지가 안나타나더라... 도대체 안될꺼면 아예 안되던가 되다 말다 하는건 또 뭐야라고 했는데 방법이 있었다. 1. onload로 체크 const img = new Image(); img.src = "어쩌고저쩌고"; img.onload = function() { ctx.drawImage(img, 10, 20, 0, 10) } 체크하라굿

canvas는 그림을 그리는데 사용되는 html 태그임. 단순 이미지가 아닌 그래프, 사진, 애니메이션 등을 구현할 수 있음. 이 포스팅에 기본적인 canvas 구현법을 정리해둠. 1. canvas에 width, height 설정하기 html 또는 js 둘중 하나로만 설정해야함. css로 설정하면 canvas 내에 도형을 그렸을때 렌더링이 이상하게 됨 (css 속성과 실제 width/height는 다른 개념이라서 깨지는것). const canvas = document.querySelector('canvas'); canvas.width = 500; canvas.height = 700; 2. canvas에 background 채우기 background 정도는 css로 해도 문제가 없지만 기본적으로 canva..