java实现背景图片的移动_【实例】html5-canvas中实现背景图片的移动

html>

图片运动实例

body {

background: #DDDDDD;

}

#canvas {

border: thin solid black;

}

input {

margin-left: 15px;

}

您的浏览器不支持canvas，请更新到最新的浏览器

---

FPS
SKY_VELOCITY/fps
GRASS_VELOCITY/fps
TREE_VELOCITY/fps
FAST_TREE_VELOCITY/fps

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

animateButton = document.getElementById("animateButton"),

//创建多个图像对象

sky = new Image(),

tree = new Image(),

nearTree = new Image(),

grass = new Image(),

grass2 = new Image(),

redRect = new Image,

paused = true,

lastTime = 0,

fps = 0,    //当前的帧速率

//都是不同图像

skyOffset = 0,

grassOffset = 0,

treeOffset = 0,

nearTreeOffset = 0,

TREE_VELOCITY = 20,

FAST_TREE_VELOCITY = 40,

SKY_VELOCITY = 8,

GRASS_VELOCITY = 75;

//以下是检测对象

var SKY_VELOCITYFps = document.getElementById("SKY_VELOCITY");

var GRASS_VELOCITYFps = document.getElementById("GRASS_VELOCITY");

var TREE_VELOCITYFps = document.getElementById("TREE_VELOCITY");

var FAST_TREE_VELOCITYFps = document.getElementById("FAST_TREE_VELOCITY");

var FPS = document.getElementById("FPS");

//擦除方法

function erase() {

context.clearRect(0, 0, canvas.width, canvas.height);

}

function draw() {

context.save();

//fps是共用的

//应该是确定当前图像位置的坐标X

//???以下四行还是有点不太理解，只知道这个可以用来循环的显示image对象，至于SKY_VELOCITY/fps是什么还不清楚

skyOffset = skyOffset 

grassOffset = grassOffset 

treeOffset = treeOffset 

nearTreeOffset = nearTree 

//检测数据

SKY_VELOCITYFps.innerHTML = SKY_VELOCITY/fps;

GRASS_VELOCITYFps.innerHTML = GRASS_VELOCITY/fps;

TREE_VELOCITYFps.innerHTML = TREE_VELOCITY/fps;

FAST_TREE_VELOCITYFps.innerHTML = FAST_TREE_VELOCITY/fps;

FPS.innerHTML = fps;

//像下面几行这样写的后果：canvas运动到后面的时候就可能没有图像对象了

//          skyOffset += SKY_VELOCITY/fps;

//          grassOffset += GRASS_VELOCITY/fps;

//          treeOffset += TREE_VELOCITY/fps;

//          nearTreeOffset += FAST_TREE_VELOCITY/fps;

//开始绘制天空

context.save();

//改变坐标原点

context.translate(-skyOffset, 0);

//绘制一个天空

context.drawImage(sky, 0, 0);

//在即将天空结尾的时候在绘制一个天空用来衔接

context.drawImage(sky, sky.width-2, 0);

//将改变的坐标原点改回来

context.restore();

//开始绘制远处的树

//此处绘制的位置有的地方出现在canvas.width之外

context.save();

//改变坐标原点

context.translate(-treeOffset, 0);

//以改变原点后的坐标上绘制好多个树

context.drawImage(tree, 100, 240);

context.drawImage(tree, 1100, 240);

context.drawImage(tree, 400, 240);

context.drawImage(tree, 1400, 240);

context.drawImage(tree, 700, 240);

context.drawImage(tree, 1700, 240);

//恢复坐标原点

context.restore();

//绘制近处的树木，他的运行速度更加的块

context.save();

context.translate(-nearTreeOffset, 0);

context.drawImage(nearTree, 250, 220);

context.drawImage(nearTree, 1250, 220);

context.drawImage(nearTree, 800, 220);

context.drawImage(nearTree, 1800, 220);

context.restore();

//绘制绿地

context.save();

context.translate(-grassOffset, 0);

//在canvas底部绘制草地image对象

context.drawImage(grass, 0, canvas.height-grass.height);

context.drawImage(grass, grass.width, canvas.height-grass.height);

context.drawImage(grass2, 0, canvas.height-grass2.height);

context.drawImage(grass2, grass2.width, canvas.height-grass2.height);

context.restore();

}

//计算当前的FPS

function calculateFps(now) {

//1000毫秒除以距离上一次计算FPS的时间意思是，或者距离上一次绘制图像

//这段时间里面执行了多少次

//除以1000是因为now和lastTime都是以毫秒为单位的

//反正fps就是一秒内能够执行绘制多少次嘛~所以的

var fps = 1000 / (now - lastTime);

lastTime = now;

return fps;

}

function animate(now) {

//如果当前时间还没有定义

if(now === undefined) {

//就把当前时间赋值给now

now = +new Date;

}

fps = calculateFps(now);

//只要不是暂停状态就执行

if(!paused) {

//擦除canvas

//原例子中是用兼容的手法实现requestAnimationFrame，所以需要erase

//              erase();

//马上绘制新的

draw();

}

//以最适合的速度执行animate中的内容，这个比较适合动画的处理，类似于setTimeout

requestAnimationFrame(animate);

}

animateButton.onclick = function(e) {

paused = paused ? false : true;

if(paused) {

animateButton.value = "运动";

} else {

animateButton.value = "暂停";

}

};

//      canvas.width = canvas.width;

//      canvas.height = canvas.height;

sky.src = "sky.png";

tree.src = "smalltree.png";

nearTree.src = "tree-twotrunks.png";

grass.src = "grass.png";

grass2.src = "grass2.png";

sky.onload = function(e) {

draw();

};

//      requestAnimationFrame(animate);

//启动

animate();