Canvas2 Canvas 태그 사용시 고해상도 모니터 대응하는 방법 canvas를 사용할 때에는 사용자의 모니터가 평범한 모니터인지 고해상도 모니터인지 고려해야 합니다. 평범한 모니터의 1px이 1px로 구성되어 있다면 고해상도 모니터의 경우 평범한 모니터에서 1px이 차지하는 면적이 4px로 구성되어 있습니다. 그래서 고해상도 모니터에서 보다 더 선명한 화면을 볼 수 있습니다. 그래서 고해상도 모니터에서 더욱 선명한 화면을 볼 수 있도록 대응을 해줘야 합니다. 다음 코드를 사용하면 사용자 컴퓨터의 화면해상도의 값을 구할 수 있습니다. const dpr = window.devicePixelRatio 고해상도 모니터를 사용한다면, window.devicePixelRatio 값이 2가 되고, 평범한 모니터를 사용한다면 window.devicePixelRatio 값이 1이 됩.. 2023. 6. 12. Canvas 위에 네모 그리는 방법 HTML의 canvas 태그를 사용해서 웹사이트에 네모를 그리는 방법에 대해서 알아보겠습니다. Index.html 파일을 다음과 같이 작성합니다. body 태그 안에 canvas 태그를 넣어주고 수정할 CSS 파일과 JS 파일을 head 태그 안에 작성해 줍니다. style.css 파일을 다음과 같이 작성해서 canvas에 배경색을 넣어줍니다. 너비와 높이 따로 지정을 하지 않아도 표시가 됩니다. 기본값은 가로 150 그리고 세모 100입니다. nemo.js 파일을 다음과 같이 작성해서 네모를 그려줍니다. const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') ctx.fillRect(10, 10, 50, 50).. 2023. 6. 9. 이전 1 다음
