如何让背景图随 cancas 的移动而移动
<!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 的移动而移动,该如何改进,求大神指导.
刚毅87浏览 1972回答 2
2回答
-
业余奶茶品鉴师
参考一下这个吧 <!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, //当前的帧速率 -
刚毅87
求大神!
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery