将javascript代码与canvas动画合并

我正在尝试'合并'一些JavaScript代码，它使用也具有动画的画布更改图片，而不会取消彼此。在这个画布上有一些云层在移动，我想把小猫扔进去。将javascript代码与canvas动画合并

我明白这可能是一个基本的HTML5画布问题，但我很难用画布。这是我第一次真正使用它。每当我尝试实施适用于小猫的代码时，画布屏幕都会变白，而且什么都不显示。

我想坚持我拥有的大部分代码。我真的想保持画布的样子，并且在那里改变任何东西，但是也要在那里添加那些小猫。有人能为我解答如何适当地做到这一点吗？

我想我会需要调整动画功能？

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

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

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

来源

2016-06-22 Zhyohzhy

你应该把所有的代码放在你的问题中。 StackOverflow有一个自称托管的jsfiddle等价物，可能很有用。 –

对不起，这不是很清楚，你想用小猫做什么？将它们覆盖在画布上，将它们用作画布的背景？ – Snsa90

在画布上叠加它们。我只想将它们倾倒在那里，而不改变它们的纵横比。编辑：好吧，部分覆盖它们。我希望他们在画布上，但让云在小猫面前移动，所以我知道我不能用CSS来做。 – Zhyohzhy

你需要知道的是，canvas元素默认是透明的。所以，注意我在这里取得了微小的变化：

body{ 
 
background:#667; 
 
} 
 

 
canvas { 
 
\t width:50vw; 
 
\t height:50vh; 
 
\t 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%; 
 
}

<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; 
 
\t 
 
\t function Background(){ 
 
     this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height; 
 
     this.render = function(){ 
 
\t \t 
 
      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); 
 
}); 
 
\t 
 
\t function Foreground(){ 
 
     this.x = 0, this.y = 0, this.w = fg.width, this.h = fg.height; 
 
     this.render = function(){ 
 
\t \t 
 
      ctx.drawImage(fg, this.x--, 0); 
 
      if(this.x <= -499){ 
 
       this.x = 0; 
 
      } 
 
     } 
 
    } 
 
    var foreground = new Foreground(); 
 
\t 
 
\t 
 
\t function animate(){ 
 
\t \t ctx.save(); 
 
\t \t ctx.clearRect(0, 0, cW, cH); \t \t 
 
\t \t background.render(); 
 
\t \t foreground.render(); 
 
\t \t ctx.restore(); 
 
\t } 
 
\t var animateInterval = setInterval(animate, 30); 
 
} 
 
window.addEventListener('load', function(event) { 
 
\t initCanvas(); 
 
}); 
 

 
</script> 
 
</head> 
 
<body> 
 
<canvas id="my_canvas" width="611" height="864"></canvas> 
 
<h1 id="status"></h1> 
 
</body> 
 
</html>

我只是删除了

background:#FFF;

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

来源

2016-06-22 13:45:56 Snsa90

哦，我刚刚编辑OPs小提琴。这是完整的代码 – Snsa90

将javascript代码与canvas动画合并

回答

相关问题