React에서 styled-components로 image 넣을때..
·
Programming/React
다음 경로의 이미지를 src 파일에 있는 다른 파일이, styled-components를 이용해 background-image 속성을 사용한다고 한다면.. 일단 import를 해와야 한다. import Bg from './img/Bg.jpg'; 라고 한 다음. styled-components에서 export const Outbox = styled.div` background: url(${Bg}); ` 다음과 같이 작성하면 된다. 사실 엄청 간단한건데.. 왜 안되는지 해메고 있었다. 아니 css는 자동으로 주소 읽어와 주던뎅..
Canvas tutorial #7 (Images)
·
Programming/Canvas
※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다. ※ 이 글은 해당사이트를 번역한 것입니다. Draw Image HTML5Canvas에서 이미지를 그리려면 이미지 객체와 대상 지점을 필요로 하는 drawImage( )를 사용할 수 있다. 대상 지점(destination point)은 캔버스 왼쪽 위 모서리를 기준으로 canvas의 왼쪽 위 모서리를 정의한다. drawImage( )는 이미지 객체가 필요하므로 먼저 이미지를 생성한 후 로드될 때까지 기다려야 한다. 이미지 객체의 onload속성을 사용하여 이 작업을 수행할 수 있습니다. context.drawImage(imageObj, X, Y); ex) 예시 코드 const canvas = document.getElementByI..