使用位图包围画布，进行无限滚动 [英] Make a bitmap wrap around the canvas for infinite scrolling
问题描述
我正在寻找一种方法来将位图图像包裹在画布上，以实现无限滚动效果。我正在查看EaselJS，但干净的javascript代码也将足够了。
I am looking for a way to wrap a bitmap image around the canvas, for an infinite scrolling effect. I'm looking at EaselJS but clean javascript code will also suffice.
现在我将图像向左移动，当它到达某个标记时，它重置本身。
Right now I am displacing an image to the left, and when it reaches a certain mark, it resets itself.
从actionscript中，有一个选项包装位图的像素到另一边，从而永远不会真正替换图像，而是你包装图像内的像素。在使用canvas的javascript中是否可能？
Coming from actionscript, there was an option to "wrap" the pixels of a bitmap around to the other side, thereby never really displacing the image, instead you were wrapping the pixels inside the image. Is this possible in javascript with canvas?
我当前的代码：
this.update = function() {
// super large graphic
_roadContainer.x -= 9;
if(_roadContainer.x < -291) _roadContainer.x = 0;
}
推荐答案
。
>
使用context.scale（-1,1）水平翻转图片。
Flip the image horizontally using context.scale(-1,1).
将翻转的图片合并到原始图片的右侧。
Combine the flipped image to the right side of the original image.
>
因为我们完全镜像了图像，组合图像的最左边和最右边完全一样。
Because we have exactly mirrored the images, the far left and right sides of the combined image are exactly the same.
因此，当我们平移合并图像和用完图像时，我们只需要将合并图像的另一个副本添加到右侧，我们就可以进行无限+无缝平移。
Therefore, as we pan across the combined image and "run out of image", we can just add another copy of the combined image to the right side and we have infinite + seamless panning.
这里是代码和小提琴： http://jsfiddle.net/m1erickson/ywDp5 /
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/ywDp5/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// thanks Paul Irish for this RAF fallback shim
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var infiniteImage;
var infiniteImageWidth;
var img=document.createElement("img");
img.onload=function(){
// use a tempCanvas to create a horizontal mirror image
// This makes the panning appear seamless when
// transitioning to a new image on the right
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=img.width*2;
tempCanvas.height=img.height;
tempCtx.drawImage(img,0,0);
tempCtx.save();
tempCtx.translate(tempCanvas.width,0);
tempCtx.scale(-1,1);
tempCtx.drawImage(img,0,0);
tempCtx.restore();
infiniteImageWidth=img.width*2;
infiniteImage=document.createElement("img");
infiniteImage.onload=function(){
pan();
}
infiniteImage.src=tempCanvas.toDataURL();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mountain.jpg";
var fps = 60;
var offsetLeft=0;
function pan() {
// increase the left offset
offsetLeft+=1;
if(offsetLeft>infiniteImageWidth){ offsetLeft=0; }
ctx.drawImage(infiniteImage,-offsetLeft,0);
ctx.drawImage(infiniteImage,infiniteImage.width-offsetLeft,0);
setTimeout(function() {
requestAnimFrame(pan);
}, 1000 / fps);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=500 height=143></canvas><br>
</body>
</html>
这篇关于使用位图包围画布，进行无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
