canvas로 게임 만들기를 하던 중 canvas 자체를 가운데 정렬을 하고 싶어 별의 별의 별의 x100 방법을 시도하다가 성공하였다!
코드가 완벽하진 않지만 일단 구현된 것에 만족한다.
JS에 CSS에서 설정한 style을 적용하는 것인데 2번째 방법으로 진행하였다.
1. canvas에 css 적용
2. canvas class에 css 적용
먼저 HTML
<body>
<canvas id="canvas" class="background"></canvas>
<script src="main.js"></script>
</body>요점 코드만 가져왔다.
canvas 태그로 JS에서 불러올 id를 설정하고 CSS에서 적용될 class를 부여한다.
CSS
.background {
width: 890px;
height: 550px;
filter: brightness(80%);
background: url(../ghostRain/img/background.PNG) no-repeat center;
background-size: contain;
display: block;
margin: auto;
text-align: center;
overflow: hidden;
}background로 이미지를 불러오고 가운데 정렬해준다.
Javascript
let canvas;
let ctx;
canvas = document.getElementById("canvas")
ctx = canvas.getContext("2d")
canvas.width = 890;
canvas.height = 550;
document.body.appendChild(canvas);getElementById() 함수로 접근한다.
참고 : https://cbn1218.tistory.com/25 ｜ 2번 방법
https://www.developerfastlane.com/docs/basic-coding/simple-web-game-02-snake-game/ ｜ 1번 방법
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] for문을 이용해서 배열로 변환 (0) | 2023.07.27 |
|---|---|
| [JavaScript] 논리 연산 logical operators 주의할 점 (0) | 2023.07.26 |
| [JavaScript] for...in vs for...of (0) | 2023.07.18 |
| [JavaScript] scope, block 등 용어 정의 (0) | 2023.07.18 |
| [JavaScript] Math｜수학과 관련된 메서드 (+최댓값과 최솟값 사이에 랜덤수 구하기) (0) | 2023.07.17 |