<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" height="" width="">
此浏览器不支持canvas,请更换浏览器
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var imgs = new Image();
imgs.src = 'img/background.png';
var bgY = 0;
function bgmove(){
context.clearRect(0,0,canvas.width,canvas.height);
bgY++;
var pattarn = context.createPattern(imgs,'repeat');
console.log(bgY);
context.fillRect(0,bgY,canvas.width,canvas.height/2);
context.fillStyle = pattarn;
context.fill();
}
setInterval(bgmove,30)
</script>
</body>
</html>想让背景图随 cancas 的移动而移动,该如何改进,求大神指导.
2 回答
已采纳
业余奶茶品鉴师
TA贡献260条经验 获得超388个赞
参考一下这个吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片运动实例</title>
<style type="text/css">
body {
background: #DDDDDD;
}
#canvas {
border: thin solid black;
}
input {
margin-left: 15px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="440">
您的浏览器不支持canvas，请更新到最新的浏览器
</canvas>
<input type="button" name="animateButton" id="animateButton" value="运动" />
<hr />
<div>
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>FPS</td>
<td><span id="FPS"></span></td>
</tr>
<tr>
<td>SKY_VELOCITY/fps</td>
<td><span id="SKY_VELOCITY"></span></td>
</tr>
<tr>
<td>GRASS_VELOCITY/fps</td>
<td><span id="GRASS_VELOCITY"></span></td>
</tr>
<tr>
<td>TREE_VELOCITY/fps</td>
<td><span id="TREE_VELOCITY"></span></td>
</tr>
<tr>
<td>FAST_TREE_VELOCITY/fps</td>
<td><span id="FAST_TREE_VELOCITY"></span></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
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, //当前的帧速率
添加回答
举报
0/150
提交
取消