Canvas 如何使imgObj出现然后消失以显示另一个imgObj？

我是编程新手，正在尝试为游戏制作一个“概念验证”项目。当用户单击第一个屏幕时，我试图从我制作的标题屏幕图像转到游戏中的房间图像，但我不完全确定如何操作。我们必须使用画布作为分配的一部分，以便将图像放置在该元素中。我想我可能有它，所以我想看到的第一个图像（Obj2）在我的第二个图像上，但我肯定。我的控制台显示我的imgObj身份不明。本质上，我希望imgObj2首先出现，然后当用户单击它时，它消失，显示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>

addEventListener（“加载”，eventWindowLoaded，false）；
函数eventWindowLoaded（）{
canvasApp（）；
}
函数canvasSupport（）{
返回现代化画布；
}
函数canvasApp（）{
如果（！canvasSupport（））{
返回；
} 
var theCanvas=document.getElementById（“canvasOne”）；
var context=canvas.getContext（“2d”）；
//把代码放在这里
var宽度=1000；
var高度=450；
var imageObj=新图像（）；
var imageObj2=新图像（）；
imageObj2.onload=函数（）{
drawImage（imageObj2,0,0）；
};
imageObj2.src='clicktostart.jpg'；
}
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src='insidemanion.jpg'；

画布图形（如标题图像）在画布上绘制后无法更改

通过清除画布并重新绘制新的所需内容来更改画布内容

所以你可以像这样完成你的任务

• 预加载两个图像，以便它们可用于绘制

• 绘制标题图像：context.drawImage（标题，0,0）

• 侦听mousedown事件（侦听用户在画布上的单击）

• 单击时，清除画布：context.clearRect（0,0，canvas.width，canvas.height）

• 绘制房间图像：context.drawImage（房间，0,0）

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
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=假；
var-startX；
var startY；
//预加载所有图像
var imgcount=2；
var title=新图像（）；
title.onload=开始；
title.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house6.jpg";
var room=新图像（）；
房间。空载=启动；
房间.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
//在每个映像完全加载时调用start
函数start（）{
//如果尚未加载所有图像，则返回
如果（--imgcount>0）{return；}
//绘制标题图像
ctx.drawImage（标题，0,0）；
//侦听鼠标向下事件（单击）
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
}
功能手柄向下（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
//清除画布并绘制房间图像
ctx.clearRect（0,0，cw，ch）；
ctx.drawImage（房间，0,0）；
}

body{背景色：白色；}
#画布{边框：1px纯红；}

单击大厦图像