imgObj를 표시 한 다음 사라져서 다른 imgObj를 표시 하시겠습니까?

저는 프로그래밍에 익숙하지 않고 게임을위한 개념 증명 프로젝트를 만들려고합니다. 나는 타이틀 화면으로 만든 이미지에서 게임 내 방의 이미지로 이동하려합니다. 사용자가 처음의 이미지를 클릭 할 때, 나는 그것에 대해 어떻게해야할지 모르겠습니다. 캔버스를 과제의 일부로 사용해야하므로 이미지가 해당 요소에 배치됩니다. 나는 내가 볼 수있는 첫 번째 이미지 (Obj2)가 내 두 번째 이미지 위에 있다는 것을 알았을 것이라고 확신한다. 내 콘솔에 내 imgObj는 신원 미상이라고합니다. 본질적으로 imgObj2를 먼저 표시 한 다음 사용자가이를 클릭하면 imgObj가 표시됩니다. 나는 조언이나 제안, 감사합니다 감사드립니다! (제목 이미지 등)imgObj를 표시 한 다음 사라져서 다른 imgObj를 표시 하시겠습니까?

  <script> 

     window.addEventListener("load",eventWindowLoaded, false); 
     function eventWindowLoaded() { 
      canvasApp();  
     } 
     function canvasSupport() { 
      return Modernizr.canvas;  
     } 
     function canvasApp() { 
      if (!canvasSupport()) { 
       return; 
      } 
      var theCanvas = document.getElementById("canvasOne"); 
      var context = theCanvas.getContext("2d"); 

      //put code here 

      var width=1000; 
      var height=450; 
      var imageObj = new Image(); 
      var imageObj2 = new Image(); 

      imageObj2.onload=function(){ 
      context.drawImage(imageObj2,0,0); 
      }; 

      imageObj2.src='clicktostart.jpg'; 
      } 
      imageObj.onload = function() { 
      context.drawImage(imageObj, 0, 0); 
      }; 

      imageObj.src = 'insidemansion.jpg'; 



       </script>

출처

2014-12-15 Remi

캔버스 드로잉 자신의 캔버스에 그려진 후에 변경할 수 없습니다

여기 내 코드입니다.

캔버스 내용을 변경하고 캔버스를 지우고 새로 원하는 내용을 다시 그립니다.

그래서 당신은

제목 이미지 그리기 그리기 위해 그들이 사용할 수 있도록이

예압 같은 두 이미지를 귀하의 작업을 수행 할 수 있습니다 context.drawImage (제목, 0, 0);
이는 MouseDown 이벤트를 수신
클릭
, 캔버스 취소 (사용자 캔버스에 클릭을 수신) : context.clearRect (0,0, canvas.width, canvas.height을);

그림 그리기 : context.drawImage (room, 0,0);

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var scrollX=$canvas.scrollLeft(); 
 
var scrollY=$canvas.scrollTop(); 
 

 
var isDown=false; 
 
var startX; 
 
var startY; 
 

 
// preload all images 
 
var imgcount=2; 
 
var title=new Image(); 
 
title.onload=start; 
 
title.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house6.jpg"; 
 
var room=new Image(); 
 
room.onload=start; 
 
room.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg"; 
 
// call start when each image is fully loaded 
 
function start(){ 
 

 
    // return if all the images aren't yet loaded 
 
    if(--imgcount>0){return;} 
 

 
    // draw the title image 
 
    ctx.drawImage(title,0,0); 
 

 
    // listen for mousedown events (clicks) 
 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 

 
} 
 

 
function handleMouseDown(e){ 
 

 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    // clear the canvas and draw the room image 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.drawImage(room,0,0); 
 

 
}

body{ background-color: white; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Click the mansion image</h4> 
 
<canvas id="canvas" width=357 height=333></canvas>

다음은 예제 코드와 데모입니다

출처

2014-12-15 16:06:00 markE

imgObj를 표시 한 다음 사라져서 다른 imgObj를 표시 하시겠습니까?

답변

관련 문제