게임 하면서 공부!JavaScript 업그레이드 강좌 part4
8009 단어 JavaScript게임 제작초보자
이번에는 캔버스로 배경과 괴물을 묘사하는 방법을 설명해 드리겠습니다.
JavaScript 도장은 Yui 입니다.
이번 목표는 이거야.
여기
캔버스가 뭐예요?
canvas는 HTML5에 표준적으로 설치된 도형을 그리는 데 사용되는 기술 규격으로 HTML의 <canvas> 요소와 자바스크립트를 조합하여 도형을 그릴 수 있다.
공식 문서가 여기 있습니다.
대충 말하면 canvas를 사용하면 이미지의 묘사, 애니메이션, 게임의 도형, 데이터의 시각화, 사진 가공 등을 간단하게 묘사할 수 있다.
canvas는 기본적으로 2차원 이미지 디스플레이를 대상으로 합니다.
사용 방법
우선, canvas를 바디 라벨에 넣어야 합니다.<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
그리고 상기 지정한 id를 사용하여 <script>에 편입합니다.
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const img = new Image()
img.src = "画像のURL"
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>
순서대로 설명하다.
우선, 이번 캔버스 id는 canvas 에서 지정되었습니다.
따라서 document.getElementById 자바스크립트와 canvas 이 id의 부분을 결합시켜야 한다.
다음 const ctx = canvas.getContext("2d") 은 canvas를 2d에 응용한 그림 그리기입니다.여기, ctx와 변수에 저장되어 있기 때문에, 그 다음은ctx입니다.hogehoge 형식으로 canvas 기능을 사용할 수 있습니다.
canvas라는 디자인 그림의 hogehoge 기능에 접근할 수 있습니다.
canvas에서 그림을 그릴 때 drawImage(描画させる画像, x軸, y軸, 横幅, 縦幅) 로 표시할 수 있기 때문에 여기에 ctx.drawImage(img, 0, 0, 100, 100) 를 쓰면 (0,0) 위치에 가로 100, 세로 100의 그림을 표시할 수 있습니다.
실제 디스플레이 슬라이더
우리 실제로 슬라이더를 보여 줍시다.
슬라이드의 이미지는 다음 URL에서 사용됩니다.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
일단 기본 HTML 데이지.<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
body에 canvas 부분 기재<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const img = new Image()
img.src = "https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png"
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>
</body>
</html>
나는 이렇게 하면 순조롭게 스케이트보드를 표시할 수 있을 것이라고 생각한다.
더 많은 것을 배우고 싶으면 반드시 참가하세요https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png.
다음에 이걸로 스케이트보드 움직여.
Reference
이 문제에 관하여(게임 하면서 공부!JavaScript 업그레이드 강좌 part4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuikoito/items/6e374b90bc873a5ba927
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선, canvas를 바디 라벨에 넣어야 합니다.
<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
<script>에 편입합니다.
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const img = new Image()
img.src = "画像のURL"
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>
우선, 이번 캔버스 id는
canvas 에서 지정되었습니다.따라서
document.getElementById 자바스크립트와 canvas 이 id의 부분을 결합시켜야 한다.다음
const ctx = canvas.getContext("2d") 은 canvas를 2d에 응용한 그림 그리기입니다.여기, ctx와 변수에 저장되어 있기 때문에, 그 다음은ctx입니다.hogehoge 형식으로 canvas 기능을 사용할 수 있습니다.canvas라는 디자인 그림의 hogehoge 기능에 접근할 수 있습니다.
canvas에서 그림을 그릴 때
drawImage(描画させる画像, x軸, y軸, 横幅, 縦幅) 로 표시할 수 있기 때문에 여기에 ctx.drawImage(img, 0, 0, 100, 100) 를 쓰면 (0,0) 위치에 가로 100, 세로 100의 그림을 표시할 수 있습니다.실제 디스플레이 슬라이더
우리 실제로 슬라이더를 보여 줍시다.
슬라이드의 이미지는 다음 URL에서 사용됩니다.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
일단 기본 HTML 데이지.<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
body에 canvas 부분 기재<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const img = new Image()
img.src = "https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png"
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>
</body>
</html>
나는 이렇게 하면 순조롭게 스케이트보드를 표시할 수 있을 것이라고 생각한다.
더 많은 것을 배우고 싶으면 반드시 참가하세요https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png.
다음에 이걸로 스케이트보드 움직여.
Reference
이 문제에 관하여(게임 하면서 공부!JavaScript 업그레이드 강좌 part4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuikoito/items/6e374b90bc873a5ba927
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const img = new Image()
img.src = "https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png"
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>
</body>
</html>
Reference
이 문제에 관하여(게임 하면서 공부!JavaScript 업그레이드 강좌 part4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuikoito/items/6e374b90bc873a5ba927텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
