使位图环绕画布以进行无限滚动 [英] 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.
来自动作脚本，有一个选项可以将位图的像素包裹"到另一侧，从而永远不会真正替换图像，而是将像素包裹在图像内.这在带有画布的 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;
}
推荐答案
从一个好的风景图片开始.
Start with a good landscape image.
使用 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/
<!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屋！
