使周围的画布无限滚动的位图包裹 [英] Make a bitmap wrap around the canvas for infinite scrolling
问题描述
我要寻找一种方式来包装一个位图图像周围的画布，对于无限滚动效果。我期待在EaselJS但干净的JavaScript code也就够了。
现在我位移的图像的左侧，并且当它达到一定标记，它重置自身。
这动作编辑，有以包装的位图的像素周围到另一侧，从而从未真正移位图像，而不是你包裹图像内的像素的选择。这是可能在JavaScript用帆布？
我目前的code：
this.update =功能（）{
//超大图形
_roadContainer.x - = 9;
如果（_roadContainer.x＆下; -291）_roadContainer.x = 0;
}
开始一个良好的景观形象。
水平翻转图像使用context.scale（-1,1）。
合并翻转图像与原始图像的右侧。
由于我们已经完全镜像图像，所述合成图像的最左边和右边是的完全相同。
因此，如我们在整个合成图像进行平移和用完图像的，我们可以只添加的合成图像的另一副本到右侧，我们有无限+无缝平移
下面是code和小提琴： http://jsfiddle.net/m1erickson/ywDp5/
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=所有的href =CSS / reset.css/＆GT; ＆LT;！ - 重置CSS - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;风格＆GT;
身体{背景颜色：乳白色; }
帆布{边界：1px的纯红色;}
＆LT; /风格＆GT;＆LT;脚本＆GT;
$（函数（）{ //感谢保罗爱尔兰这个皇家空军后备垫片
window.requestAnimFrame =（函数（回调）{
返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
函数（回调）{
window.setTimeout（回调，1000年至1060年）;
};
}）（）;
VAR帆布=的document.getElementById（画布上）;
变种CTX = canvas.getContext（2D）; VAR infiniteImage;
VAR infiniteImageWidth;
VAR IMG =使用document.createElement（img目录）;
img.onload =功能（）{ //使用tempCanvas以创建水平镜像
//这使得平移显得浑然一体时
//过渡到一个新的形象右侧
VAR tempCanvas =使用document.createElement（画布上）;
变种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 =功能（）{
泛（）;
}
infiniteImage.src = tempCanvas.toDataURL（）;
}
img.crossOrigin =匿名;
img.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mountain.jpg;
VAR FPS = 60;
变种offsetLeft = 0;
功能盘（）{ //增加左偏移
offsetLeft + = 1;
如果（offsetLeft＆GT; infiniteImageWidth）{offsetLeft = 0; } ctx.drawImage（infiniteImage，-offsetLeft，0）;
ctx.drawImage（infiniteImage，infiniteImage.width-offsetLeft，0）; 的setTimeout（函数（）{
requestAnimFrame（PAN）;
}，1000 / FPS）;
}}）; //结束$（函数（）{}）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;身体GT;
＆LT;帆布ID =画布WIDTH = 500 HEIGHT = 143＆GT;＆LT; /帆布＆GT;＆LT; BR＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
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.
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?
My current code:
this.update = function() {
// super large graphic
_roadContainer.x -= 9;
if(_roadContainer.x < -291) _roadContainer.x = 0;
}
Start with a good landscape image.
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.
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屋！
