                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

如何讓背景圖隨 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 的移動而移動,該如何改進,求大神指導.