HTML5 캔버스를 사용한 이미지 조작 : 슬라이딩 퍼즐

코어 포인트

html5 캔버스 요소를 사용하면 라인 도면, 이미지 파일 및 애니메이션을 포함한 멀티미디어 컨텐츠를 웹 페이지에 기본 통합 할 수 있으며 슬라이딩 퍼즐 게임을 만드는 데 사용할 수 있습니다.

캔버스 드로잉은 javaScript 함수 에 의해 초기화되는 컨텍스트를 통해 수행됩니다. javaScript의

기능은 캔버스에 이미지를 표시하는 데 사용되며 다양한 매개 변수 옵션을 사용하면 이미지 크기 조정 및 이미지 부품 추출이 가능합니다.
• 슬라이딩 퍼즐의 게임 논리에는 보드를 나타내는 2 차원 배열을 만드는 것이 포함됩니다. 각 요소는 퍼즐 그리드에서 위치를 정의하는 x 및 y 좌표가있는 객체입니다. 보드가 초기화되면 각 퍼즐 조각은 올바른 위치와 반대되는 바둑판 정사각형에 있습니다.
사용자 입력 이벤트는 타일의 수와 크기를 다시 계산하고 마우스 움직임을 추적하여 클릭중인 타일을 식별하고 퍼즐이 해결되었는지 확인하는 기능을 트리거합니다. 기능은 새 위치에서 클릭 타일을 사용하여 보드를 다시 주도합니다.
• getContext() html5에는 웹 페이지에 멀티미디어 기본 통합을 가능하게하는 많은 기능이 포함되어 있습니다. 함수 중 하나는 캔버스 요소로, 라인 도면, 이미지 파일 또는 애니메이션을 채울 수있는 빈 캔버스입니다. 이 튜토리얼에서는 슬라이딩 퍼즐 게임을 만들어 HTML5 캔버스의 이미지 처리 기능을 시연 할 것입니다. 캔버스를 웹 페이지에 포함 시키려면 태그를 사용하십시오 : drawImage()
• 및
속성은 캔버스 크기를 픽셀로 설정합니다. 이러한 특성이 지정되지 않은 경우 너비 기본값은 300px로, 높이 기본값은 150px로 표시됩니다. 캔버스 드로잉은 JavaScript 함수
• 에 의해 초기화되는 컨텍스트를 통해 수행됩니다. W3C에 의해 지정된 2 차원 컨텍스트를 적절하게 "2D"라고합니다. 따라서 ID "캔버스"가있는 캔버스의 컨텍스트를 초기화하려면 다음과 같이 전화하면됩니다. drawTiles() 다음 단계는 이미지를 표시하는 것입니다. JavaScript는이를 위해 함수 만 제공하지만이 기능을 호출하는 세 가지 방법이 있습니다. 가장 기본적인 형태 에서이 함수는 캔버스의 왼쪽 상단 모서리에서 이미지 객체와 x 및 y 오프셋의 세 가지 매개 변수를 취합니다.

이미지 크기를 조정하기 위해 다른 두 매개 변수를 추가 할 수도 있습니다.

<canvas></canvas> 가장 복잡한 형태의

는 9 개의 매개 변수를 취합니다. 첫 번째는 이미지 객체입니다. 다음 네 가지 매개 변수는 소스 x, y, 너비 및 높이입니다. 다른 4 가지 매개 변수는 대상 x, y, 너비 및 높이입니다. 이 함수는 이미지의 일부를 추출하여 캔버스를 그리며 필요한 경우 크기를 조정합니다. 이를 통해 이미지를 스프라이트 테이블로 취급 할 수 있습니다.

<code class="language-html"><canvas height="480px" width="480px"></canvas></code>

<code class="language-html"><canvas height="480px" width="480px"></canvas></code>

모든 형태의

에는 몇 가지 예방 조치가 있습니다. 이미지가 비어 있거나 수평 또는 수직 치수가 0이거나 소스 높이 또는 너비가 0 인 경우 drawImage()는 예외를 던집니다. 브라우저가 이미지를 디코딩 할 수 없거나 함수가 호출 될 때 이미지가 아직로드되지 않은 경우 drawImage()는 아무것도 표시하지 않습니다. 그것은 이미지 처리에 HTML5 캔버스를 사용하는 것입니다. 이제 실제로 그것을 살펴 보겠습니다. drawImage()

이 HTML 블록에는 또 다른 HTML5 기능인 범위 입력이 포함되어있어 사용자가 슬라이더를 사용하여 숫자를 선택할 수 있습니다. 우리는 나중에 범위 입력이 퍼즐과 어떻게 상호 작용하는지 보게 될 것입니다. 그러나주의하십시오 : 대부분의 브라우저는 범위 입력을 지원하는 반면, 글을 쓰는 시점에는 두 개의 인기있는 브라우저 (Internet Explorer와 Firefox)가 지원되지 않습니다. 위에서 언급했듯이 캔버스를 그리려면 컨텍스트가 필요합니다.

<code class="language-javascript">document.getElementById("canvas").getContext("2d");</code>

우리는 다른 사진이 필요합니다. 아래에 인용 된 이미지 또는 캔버스에 맞는 (또는 적합하도록 크기에 맞는) 다른 정사각형 이미지를 사용할 수 있습니다.

<code class="language-javascript">drawImage(image, x, y);</code>

이벤트 리스너는 브라우저가이를 그리려고 시도하기 전에 이미지가로드되었는지 확인하는 데 사용됩니다. 이미지를 그릴 준비가되지 않으면 캔버스는 이미지를 표시하지 않습니다. 퍼즐 캔버스에서 보드 크기를 얻고 범위 입력에서 타일 수를 얻습니다. 이 슬라이더의 범위는 3 ~ 5이며 값은 행 수와 열을 나타냅니다.

이 두 숫자를 사용하면 타일 크기를 계산할 수 있습니다.

<code class="language-javascript">drawImage(image, x, y, width, height);</code>

이제 우리는 보드를 만들 수 있습니다.

<code class="language-javascript">drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);</code>

기능은 가상 보드를 정의하고 초기화하는 곳입니다. 체스 판을 나타내는 자연스러운 방법은 2 차원 배열을 사용하는 것입니다. JavaScript에서 이러한 배열을 만드는 것은 우아한 프로세스가 아닙니다. 먼저 평평한 배열을 선언 한 다음 배열의 각 요소를 배열로 선언합니다. 이러한 요소는 다차원 배열에 액세스하는 것처럼 액세스 할 수 있습니다. 슬라이딩 퍼즐 게임의 경우 각 요소는 퍼즐 그리드에서 위치를 정의하는 x 및 y 좌표가있는 객체가됩니다. 따라서 각 객체에는 두 개의 좌표 세트가 있습니다. 첫 번째 그룹은 배열에서의 위치가 될 것입니다. 이것은 보드에서의 위치를 ​​나타내므로 바둑판 광장이라고 부릅니다. 각 보드 스퀘어에는 퍼즐 이미지에서 x 및 y 속성이 자신의 위치를 ​​나타내는 객체가 있습니다. 나는 이것을 퍼즐 조각이라고 부릅니다. 보드 스퀘어의 좌표가 퍼즐 조각의 좌표와 일치하면 타일은 퍼즐 해결의 올바른 위치에 있습니다. 이 튜토리얼에서는 각 퍼즐 조각을 퍼즐의 올바른 위치와 반대되는 바둑판 사각형으로 초기화합니다. 예를 들어, 오른쪽 상단의 타일은 왼쪽 하단의 체스 보드 광장에 있습니다.

... (길이가 너무 길고 핵심 논리가 이전에 요약되어 있기 때문에 후속 코드가 생략됩니다. 완전한 코드는 원본 텍스트에 따라 제공되어야합니다.)

<code class="language-html"><div>
  <label>简单</label>
  <label>困难</label>
  <br><br>
</div>
<div>
  <canvas height="480px" width="480px"></canvas>
</div></code>

. 마지막으로, 새 위치에서 클릭 타일을 사용하여 보드를 다시 주도하십시오.

_{... (후속 코드는 생략 됨)}

이게 다야! 캔버스 요소와 일부 자바 스크립트 및 수학 지식은 강력한 기본 이미지 처리 기능을 HTML5에 제공합니다.

<code class="language-javascript">var context = document.getElementById("puzzle").getContext("2d");</code>

당신은

https://www.php.cn/link/15fd459bc66aa8401543d8f4d1d97 에서 슬라이딩 퍼즐의 라이브 데모를 찾을 수 있습니다 (링크가 invalid). HTML5 캔버스 및 슬라이딩 퍼즐로 이미지 처리에 대한 자주 묻는 질문 (FAQ)

html5 캔버스를 사용하여 슬라이딩 퍼즐 게임을 만드는 방법은 무엇입니까?

html5 캔버스로 슬라이딩 퍼즐을 만드는 데 몇 단계가 필요합니다. 먼저 HTML 파일에서 캔버스 요소를 작성해야합니다. 그런 다음 JavaScript 파일 에서이 캔버스와 2D 컨텍스트를 참조해야하므로이를 그릴 수 있습니다. 그런 다음 이미지를 캔버스에로드하여 타일 그리드로 나눌 수 있습니다. 이 타일은 초기 퍼즐 상태를 만들기 위해 섞일 수 있습니다. 그런 다음 타일 이동 및 승리 조건을 확인하는 등 게임 로직을 구현할 수 있습니다.

캔버스 API를 사용하여 픽셀을 처리하는 방법은 무엇입니까?

Canvas API는

라는 메소드를 제공하여 지정된 캔버스 영역에서 픽셀 데이터를 검색 할 수 있습니다. 이 메소드는 픽셀 값 배열을 포함하는 a 객체를 반환합니다. 각 픽셀은 네 가지 값 (빨간색, 녹색, 파란색 및 알파)으로 표시 되므로이 값을 처리하여 단일 픽셀의 색상을 변경할 수 있습니다. 이러한 변경 사항을 적용하려면

메소드를 사용할 수 있습니다.

htmlcanvaselement의

방법은 무엇입니까?

htmlcanvaselement의 메소드는 캔버스에 표시된 이미지를 나타내는 데이터 URL을 만들 수있는 강력한 도구입니다. 이 데이터 URL은 이미지 요소의 소스로 사용하거나 데이터베이스에 저장하거나 서버로 전송 될 수 있습니다. 이 메소드는 이미지 형식을 지정하기 위해 선택적 매개 변수를 사용합니다. 매개 변수가 제공되지 않으면 기본 형식은 PNG입니다.

Github의 슬라이딩 퍼즐 게임 프로젝트에 기여하는 방법은 무엇입니까?

Github는 개발자가 프로젝트를 공유하고 다른 사람들과 협력하는 플랫폼입니다. 슬라이딩 퍼즐 프로젝트에 기여하려면 Forking Repository부터 시작하여 자신의 Github 계정에 프로젝트 사본을 생성 할 수 있습니다. 그런 다음이 저장소를 로컬 컴퓨터로 복제하고 변경 한 다음 해당 변경 사항을 포크 리포지토리로 다시 밀어 넣을 수 있습니다. 마지막으로 풀 요청을 열어 원래 저장소의 변경 사항을 제안 할 수 있습니다. getImageData() ImageData 이미지 처리에 캔버스를 사용하는 방법은 무엇입니까? putImageData() 캔버스는 이미지를 처리하는 유연하고 강력한 방법을 제공합니다. 이미지를 캔버스에 그릴 수 있고 변환을 적용하고 단일 픽셀을 처리 할 수 ​​있습니다. 예를 들어, 픽셀 데이터를 반복하고 빨간색, 녹색 및 파란색의 값을 원래 값의 평균으로 설정하여 회색조 효과를 만들 수 있습니다. 빨간색, 녹색 및 파란색의 값에 특정 공식을 적용하여 황갈색 효과를 만들 수도 있습니다. 이미지를 처리 ​​한 후에는

메소드를 사용하여 결과를 내보낼 수 있습니다.

위 내용은 HTML5 캔버스를 사용한 이미지 조작 : 슬라이딩 퍼즐의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!