html5 : 캔버스 위로 이미지 표시

Question

html5canvas 태그를 구현하려고했습니다.

나는 캔버스를 사용하여 게임을하기 위해 보드를 만들었습니다. 이제 게임에 졸을 추가하고 싶었습니다. 캔버스에 ctx.drawImage() 메서드를 사용하여 이미지를 캔버스에 추가 할 수는 있지만 이미지가 실제로 캔버스에 인쇄됩니다.

나는 폰을 이동시킬 수 있도록 을 이상의 보드 (이론적으로 레이어가 있음)로 그려야했다. 이 코드를 사용하여 자바 스크립트를 사용하여 이미지를 추가했습니다.

function show_image(src, width, height, alt) { 
var img = document.createElement("img"); 
img.src = src; 
img.width = width; 
img.height = height; 
img.alt = alt; 

document.body.appendChild(img); 
} 

하지만 그건 도움이되지 못했습니다. 이 함수는 기본 html 파일의 본문에 요소를 "추가"하는 것으로 추측 할 수 있습니다. 이는 이미지가 페이지에 표시되지 않는 이유 일 수 있습니다.

아무도 나를 도울 수있는 방법을 알 수 있습니까 캔버스 이상? 어떤 도움을 주시면 감사하겠습니다!

자유롭게 의견을 제안 할 수 있습니다.

Answer 1

두 캔버스를 절대 위치와 함께 사용하면 하나의 캔버스가 다른 캔버스 위에 놓이는 등 간단한 캔버스를 사용할 수 있습니다. 당신이 보드를 보여줄 수 있고, 계층 2에서 당신이 폰을 표시 할 수 있습니다 계층 1

<div style="position: relative;"> 
<canvas id="layer1" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="layer2" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div> 

..