个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在寻找一种将位图图像环绕在 Canvas 上以实现无限滚动效果的方法。我正在查看 EaselJS，但干净的 JavaScript 代码也足够了。
现在我将图像向左移动，当它到达某个标记时，它会自行重置。
来自 actionscript，有一个选项可以将位图的像素“包裹”到另一边，从而永远不会真正取代图像，而是将像素包裹在图像内部。这在带有 Canvas 的 javascript 中可能吗？
我当前的代码:
this.update = function() {
// super large graphic
_roadContainer.x -= 9;
if(_roadContainer.x < -291) _roadContainer.x = 0;
}
最佳答案
从一张好的风景图片开始。
使用 context.scale(-1,1) 水平翻转图像。
将翻转后的图像合并到原始图像的右侧。
因为我们已经完全镜像图像，所以组合图像的最左侧和最右侧完全相同。
因此，当我们平移组合图像并“用完图像”时，我们只需将组合图像的另一个副本添加到右侧，我们就可以进行无限+无缝平移。
这是代码和 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>
关于javascript - 使位图环绕 Canvas 以实现无限滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20263954/
27
4
0
我有 3 个列表项，每 3 秒向上旋转一次。我正在使用 transformY 属性来做这件事。问题是，当它到达最后一个元素时，它会循环返回，从而产生重新开始的效果。 如何通过在最后一项之后继续向上旋转
我如何制作一个处理旋转的无限/重复世界，就像在这个游戏中一样: http://bloodfromastone.co.uk/retaliation.html 我通过具有这样的层次结构对我的旋转移动世界进
这个问题已经有答案了: Using explicitly numbered repetition instead of question mark, star and plus (4 个回答) 已关闭
程序说明: I have this program of mine which is intended to read every word from a file (large one) and t
while 循环应该比较这两个对象的 ibsn。正在比较的对象: list[0] = new ReadingMatter ("Words and Stuff", "9-082-1090-1");
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我完全被屏蔽了。我尝试修改 C 中的“警报”信号，以便在秒数到期时读取一个简单的变量。我的代码如下: 在主要部分: int semnal; signal(SIGALRM, alarmHandle
我正在接受多行信息(字符串，直到我稍后解析它们)。例如: 1 5 0 2 9 6 2 9 1 我编写这段代码来分隔行，因为我将不得不以某种方式操作每一行。 Scanner scan = new Sca
我不熟悉 jQuery，并且我有多余的 jQuery 调用，我想将它们放入循环中。 $('.class1').on('click', function () { ... $('.class2').on
我有一个树结构，其中每个节点都有 5 个子节点，并且不允许超过 5 个。我希望以广度优先搜索的方式遍历这棵树。 现在我想使用广度优先搜索方式从选定的父节点计算空节点。 例如 如果给定的父节点为 1，则
目标/动机 我想写一个服务，它应该一直运行。但是当服务已经运行时，应该不可能再次启动该服务。 用例 用户 X 打开页面 myService.php 并通过单击页面上的按钮启动服务。之后关闭浏览器。一段
我正在尝试编译 shogun 工具箱，但遇到了这个错误 C:/shogun-3.0.0/shogun-3.0.0/src/shogun/../shogun/mathematics/Math.h
需要学校的 JavaScript 作业帮助，但不知道该怎么做，希望得到一些提示？ 我们应该创建一个 6 面掷骰子程序，用户可以选择应该掷多少个骰子，最少 1 个和最多 5 个骰子。 所用骰子数量的总和
我在无限 ScrollView 中有 5 张图片。 因此，为了使 scrollView 无限/循环，我将图像定位如下: 5 1 2 3 4 5 1含义:最后一张图片第一张图片第二张图片.....最后一
我正在使用 ExTwitter库，并希望能够偶尔终止对流式 API 的调用以更改参数。 我当前的代码看起来像这样: for tweet #finished end 关于elixir - 如何中断(无
我想每 3 秒更改一次 div 的背景。这需要循环，因此一旦最后一个背景图像显示，它就会循环回到第一个背景图像，依此类推。我在这样做时遇到了麻烦。 我之前发过一篇文章，内容非常模糊，没有得到帮助。
我在做this教程，无法让我的页面正确加载。我不断在控制台中收到错误:[$rootScope:infdig]。 我对 Angular 很陌生，但从我读到的内容来看，我在某个地方有一个无限循环。我预计它
所以我试图创建一个无限的 asyncIterator/生成器。该代码应该为“for wait of”循环生成“Hello”和“Hi”，然后永远等待下一个值。问题是它不等待第三个值，也不在循环后打印 2
下图显示了我如何在 HTML5/JS 中制作无限背景滚动。我的连续背景由 X block Canvas 组成。我将在到达下一个 Canvas 之前立即渲染它，并释放上一个 Canvas。这里的问题是动
作为一个业余项目，我正在研究一些自制的素数生成问题，尝试编写一些不同的实现作为自学 C 和 C++ 的方法。当然，生成低素数的最快方法是已经拥有它们，所以我想着手建立一个硬盘素数列表数据文件。我想编写
我是一名优秀的程序员,十分优秀！