我正在建立一个帆布游戏.在这里我想在循环中滑动背景图像.我不知道如何使用
javascript做到这一点.我将使用单个图像,它将连续滑入背景.
提前致谢.
提前致谢.
解决方法
有几种方法可以实现这一点,第一种方法将使用put
ImageData获得性能,第二种方法只使用drawImage.另请注意,第二种方法的代码是从左到右,或从右到左.
http://www.somethinghitme.com/projects/bgscroll/
var ctx = document.getElementById("canvas").getContext("2d"),canvasTemp = document.createElement("canvas"),scrollImg = new Image(),tempContext = canvasTemp.getContext("2d"),imgWidth = 0,imgHeight =0,imageData = {},canvasWidth = 600,canvasHeight = 240,scrollVal = 0,speed =2;
scrollImg.src = "citybg.png";
scrollImg.onload = loadImage;
function loadImage(){
imgWidth = scrollImg.width,imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
tempContext.drawImage(scrollImg,imgWidth,imgHeight);
imageData = tempContext.getImageData(0,imgHeight);
render();
}
function render(){
ctx.clearRect(0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth-speed){
scrollVal = 0;
}
scrollVal+=speed;
// This is the bread and butter,you have to make sure the imagedata isnt larger than the canvas your putting image data to.
imageData = tempContext.getImageData(canvasWidth-scrollVal,scrollVal,canvasHeight);
ctx.putImageData(imageData,imgHeight);
imageData = tempContext.getImageData(0,canvasWidth-scrollVal,imgHeight);
setTimeout(function(){render();},10);
}
第二种方法使用与上面相同的代码,只需将这两个功能更改为以下内容即可.
http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html
function loadImage(){
imgWidth = scrollImg.width,imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
render();
}
function render(){
ctx.clearRect(0,canvasHeight);
if(scrollVal >= canvasWidth){
scrollVal = 0;
}
scrollVal+=speed;
ctx.drawImage(scrollImg,imgHeight,imgHeight);
ctx.drawImage(scrollImg,imgHeight);
// To go the other way instead
ctx.drawImage(scrollImg,-scrollVal,imgHeight);
ctx.drawImage(scrollImg,imgHeight);
setTimeout(function(){render();},10);
}
