Question

我正在尝试'合并'一些javascript代码，这些代码用一个也有动画效果的画布来改变图片，而没有它们互相取消。在这个画布中有一些移动的云，我想把小猫扔进去。

我理解这可能是一个基本的HTML5画布问题，但我使用画布很糟糕。这是我第一次真正使用它。每当我尝试实现适用于小猫的代码时，画布屏幕就会变白并且没有任何显示。

我想坚持使用我拥有的大部分代码。我真的想保持画布的样子并且不改变任何东西，但也在那里添加那些小猫。有人可以帮我解决这个问题吗？

我猜我需要以某种方式调整动画功能吗？

function animate(){
        ctx.save();
        ctx.clearRect(0, 0, cW, cH);        
        background.render(); 
        foreground.render(); 
        ctx.restore();
    }
    var animateInterval = setInterval(animate, 30);
}

代码全部在FIDDLE，因为在这里显示它太多了。

编辑：要清楚，我要求将小猫的图片放在画布上，但我希望画布中的云层覆盖小猫。

Answer 1

您需要知道的是，canvas元素默认是透明的。请注意我在这里做的小改动：

＆＃13;

body{ 
background:#667; 
}

canvas {
	width:50vw;
	height:50vh;
	margin-left: 20%;
}

#image {
border:#000 1px solid; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
top:140px;
z-index: -1;
}

#my_canvas{ 
border:#000 1px solid; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}

＆＃13;

<link href="css.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="" id="image"/>
<script>

var bg = new Image();
bg.src = "http://proverum.ru/templates/oblaka/img/cloud.png";
var fg = new Image();
fg.src = "http://www.tourisme-fumel.com/img_interf/meteo/cloudy.png";

function initCanvas(){
var lastTick = 0;
var position = { x:0, y:0 };
var rain = document.getElementById('rain');
var ctx = document.getElementById('my_canvas').getContext('2d');
var canvas_container = document.getElementById('my_canvas2');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
	
	function Background(){
        this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height;
        this.render = function(){
		
            ctx.drawImage(bg, this.x--, 0);
            if(this.x <= -250){
                this.x = 0;
            }
        }
    }
    var background = new Background();

var image1 = "http://www.catsofaustralia.com/images/three_kittens.jpg";
var image2 = "http://thecatpalace.com.au/wp-content/uploads/2015/05/kitten1.jpg";
var image3 = "http://www.keepingkittens.com/images/cute-little-kitten-minka-rose-the-real-cinderella-story-21652512.jpg";

$(function() {
  $("#image").prop("src", image1);
  setInterval(function() {
$("#image").prop("src", image2);
setTimeout(function() {
  $("#image").prop("src", image2);
  setTimeout(function() {
    $("#image").prop("src", image3);
  }, 50);
  setTimeout(function() {
    $("#image").prop("src", image1);
  }, 500);
}, 10);
  }, 5000);
});
	
	function Foreground(){
        this.x = 0, this.y = 0, this.w = fg.width, this.h = fg.height;
        this.render = function(){
		
            ctx.drawImage(fg, this.x--, 0);
            if(this.x <= -499){
                this.x = 0;
            }
        }
    }
    var foreground = new Foreground();
	
	
	function animate(){
		ctx.save();
		ctx.clearRect(0, 0, cW, cH);		
		background.render(); 
		foreground.render(); 
		ctx.restore();
	}
	var animateInterval = setInterval(animate, 30);
}
window.addEventListener('load', function(event) {
	initCanvas();
});

</script>
</head>
<body>
<canvas id="my_canvas" width="611" height="864"></canvas>
<h1 id="status"></h1>
</body>
</html>

＆＃13;

我刚删除了

background:#FFF;

从画布css和画布变得透明。如何将画布排列在小猫上取决于你，我只是快速使用位置：relative和z-index来证明我的观点。

将javascript代码与画布动画合并

1 个答案: