我正在尝试将图像添加到画布中，然后慢慢将它们从屏幕上滑下来。我已经设置好了，所以图像不断添加，它们会在屏幕上显示出来。我想在点击上在画布上添加一个新图像，然后这个相同的图像慢慢滑离屏幕。
以下是我的尝试。它将图像添加到画布上，然后它们向上移动屏幕，但它是一个眼睛，而不是理想的行为。
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHeight;
var x = windowHeight;
function newImage() {
var images = [
'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
'http://www.convoy.me/image/landing/Scratcher.png',
'http://www.convoy.me/image/landing/push_harder_0006.png',
'http://www.convoy.me/image/landing/Scratcher.png',
'http://www.convoy.me/image/landing/Screen-Shot-2015-12-04-at-17.14.41.jpg'
];
var randomImage = parseInt(Math.random() * images.length);
var randomPosition = parseInt(Math.random() * 1200);
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, randomPosition, x, 200, 200);
};
imageObj.src = images[randomImage];
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
x--;
newImage();
}
setInterval(draw, 50);
canvas.addEventListener("click", draw, false);<canvas id="canvas"></canvas>
答案 0 :(得分：0)
我希望此代码对您有所帮助。
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHeight;
function newImage() {
var randomPosition = parseInt(Math.random() * 1200);
var images = [
'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
'http://www.convoy.me/image/landing/Scratcher.png',
'http://www.convoy.me/image/landing/push_harder_0006.png',
'http://www.convoy.me/image/landing/Scratcher.png',
'http://www.convoy.me/image/landing/Screen-Shot-2015-12-04-at-17.14.41.jpg'
];
var y = windowHeight;
var randomImage = parseInt(Math.random() * images.length);
(function draw() {
var imageObj = new Image();
imageObj.onload = function () {
ctx.clearRect(randomPosition - imageObj.width, y, imageObj.width,imageObj.height);
y-=5;
ctx.drawImage(imageObj, randomPosition - imageObj.width, y, imageObj.width,imageObj.height );
if (y > -imageObj.height){
requestAnimationFrame(draw)
}
};
imageObj.src = images[randomImage];
})();
}
canvas.addEventListener("click", newImage, false);<canvas id="canvas"></canvas>
答案 1 :(得分：0)
您需要将加载与绘图功能分开。
我认为你希望它是一个无限的图像列表（尽可能接近无限）
您需要维护一个＆＃34;队列＆＃34;对于图像，有多少取决于您期望用户点击的频率以及图像的大小。
在编程中，Queue是一个具有其同名功能的数组。先进先出，新项目是最后的位置旧项目从一开始就被删除。 （只要应用先出先出规则，哪个方式无关紧要）
为此，队列将允许预先加载图像并在需要时准备好显示。
图像队列。
// the images
var imageURLs = ["img1.jpg","img2.jpg","img3.jpg",...,"img_n.jpg"];
var imageQueue = []; // empty.
function addImageToQueue(URL){
var img = new Image();
img.src = URL;
img.onload = function(){
this.ready = true; // mark the image as loaded and ready
}
img.onerror = function(){
this.ready = true; // is ready
this.error = true; // but can not be displayed
}
imageQueue.push(img);
}
// get an image if ready from the queue
// return undefined if nothing is ready
// removes errored images and returns first non error if ready
function getNextImage(){
if(imageQueue.length > 0){
if(imageQueue[0].ready && !imageQueue[0].error){ // is image ready and no error
return imageQueue.shift(); // remove from the list and return
}else{
while(imageQueue.length > 0 && imageQueue[0].ready && !imageQueue[0].error){
// remove bad images
imageQueue.shift();
}
// no need to check error just did that
if(imageQueue.length > 0 && imageQueue[0].ready){// if any left and ready
return imageQueue.shift(); // remove from the list and return
}
}
}
没有你设置图像队列让我们处理动画。这是一种标准的动画方法。
function update(time){ // time is supplied by browser
ctx.clearRect(0,0,ctx.width,ctx.height); // clear
manageImageQueue();
drawImages();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
这两个函数manageImageQueue和drawImages的名称为
设置这些功能
const queueLen = 5; // number of images to keep in the queue
var displayImages = []; // current displayed images
var nextImage = true; // if true get a loaded image and add to display list
function manageImageQueue(){
while(imageQueue.length < queueLen && imageURLs.length > 0){
addImageToQueue(imageURLs.shift()); // add an image
}
if(nextImage){
var image = getNextImage();
if(image !== undefined){
// not sure where you want image to start so I put it bottom center
// all existing image increase the speed so that they move of canvas
displayImages.forEach(function(img){ img.yStep += -1; });
displayImages.push({
image : img,
x : ctx.canvas.width / 2 - image.width / 2,
y : ctx.canvas.height - image.height,
yStep : 0, // dont move
});
nextImage = false;
}
}
}
function drawImages(){
for(var i = 0; i < displayImages.length; i ++){
var img = displayImages[i]; // get image
img.y += img.yStep; // move image
if(img.y + img.image.height < 0){ // if off screen
displayImages.splice(i,1); // remove image
i-= 1; // step back so we dont skip the next image if there is one
}else{
ctx.drawImage(img.image,img.x,img.y); // draw the image
}
}
}
现在我们所需要的只是启动它的用户事件。
function nextImage(){ // you add this to what ever event
nextimage = true; // flag that a new image is needed.
}
就是这样。
这将预加载图像，当标志nextImage为true时，如果画布可用，则添加图像。如果没有可用的图像，它将等到有，然后添加它。添加新图像时，画布上的任何图像都将设置为向上移动。
它将执行此操作，直到imageURLs数组中没有更多图像。
准备添加演示，但我看到有人已经帮助过你了，所以会留下它。答案中有一些拼写错误。如果您使用此代码并出现问题，请添加评论..
：）