android游戏滚动画布,在html5画布中滚动/滑动背景

有几种方法可以实现这一点,第一种方法将使用put

ImageData获得性能,第二种方法只使用drawImage.另请注意,第二种方法的代码是从左到右,或从右到左.

var ctx &＃61; document.getElementById("canvas").getContext("2d"),canvasTemp &＃61; document.createElement("canvas"),scrollImg &＃61; new Image(),tempContext &＃61; canvasTemp.getContext("2d"),imgWidth &＃61; 0,imgHeight &＃61;0,imageData &＃61; {},canvasWidth &＃61; 600,canvasHeight &＃61; 240,scrollVal &＃61; 0,speed &＃61;2;

scrollImg.src &＃61; "citybg.png";

scrollImg.onload &＃61; loadImage;

function loadImage(){

imgWidth &＃61; scrollImg.width,imgHeight &＃61; scrollImg.height;

canvasTemp.width &＃61; imgWidth;

canvasTemp.height &＃61; imgHeight;

tempContext.drawImage(scrollImg,imgWidth,imgHeight);

imageData &＃61; tempContext.getImageData(0,imgHeight);

render();

}

function render(){

ctx.clearRect(0,canvasWidth,canvasHeight);

if(scrollVal >&＃61; canvasWidth-speed){

scrollVal &＃61; 0;

}

scrollVal&＃43;&＃61;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 &＃61; tempContext.getImageData(canvasWidth-scrollVal,scrollVal,canvasHeight);

ctx.putImageData(imageData,imgHeight);

imageData &＃61; tempContext.getImageData(0,canvasWidth-scrollVal,imgHeight);

setTimeout(function(){render();},10);

}

第二种方法使用与上面相同的代码,只需将这两个功能更改为以下内容即可.

function loadImage(){

imgWidth &＃61; scrollImg.width,imgHeight &＃61; scrollImg.height;

canvasTemp.width &＃61; imgWidth;

canvasTemp.height &＃61; imgHeight;

render();

}

function render(){

ctx.clearRect(0,canvasHeight);

if(scrollVal >&＃61; canvasWidth){

scrollVal &＃61; 0;

}

scrollVal&＃43;&＃61;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);

}