- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在开发一款模拟重力的 javascript 游戏。它使用 HTML5 canvas 元素为行星绘制 2D 椭圆。我在 Google Chrome 中测试我的游戏。这是游戏的链接:http://gravitygame.hostingsiteforfree.com/index.php?page=playHTML
直到 5 月 24 日,它都运行良好。但是Chrome从26.0.1410.64升级到27.0.1453.94后,填充的椭圆有时画不出来。每次加载我的游戏时都不会发生这种情况,而且我在本地运行时也从未遇到过中断。
这是游戏运行的屏幕截图:
这是一个屏幕截图,显示它没有填充省略号:
我不知道发生了什么。我将包括绘制所有行星的循环部分。为了便于阅读,我对其进行了修改。
var i = bodies.length;
while(i--){
var I = bodies[i];
var planetRad = (I.width/2)*_scale;
if(_showTrails){
//draw the planet's trail
}
if(//the planet is completely off the screen){
//draw a red planet on the edge of the screen
ctx.beginPath();
ctx.arc(nX, nY, 2.5, 0, TWOPI);
ctx.fillStyle = offScreenColor;
ctx.fill();
ctx.strokeStyle = offScreenOutline;
ctx.stroke();
}
else{
//draw planet
ctx.beginPath();
ctx.arc(nX, nY, (I.width/2)*_scale, 0, TWOPI);
ctx.closePath();
ctx.fillStyle = I.bodyColor;
ctx.fill();
}
if(_showMotionVector){
//draw a line from the center of a planet showing the direction and speed it's travelling
ctx.strokeStyle = motionColor;
ctx.beginPath();
ctx.moveTo(I.getScX(), I.getScY());
ctx.lineTo(I.motion.x * _scale * 12 + I.getScX(), I.motion.y * _scale * 12 + I.getScY());
ctx.stroke();
}
}
为什么有时会突然坏掉?
最佳答案
我查看了您的在线代码,发现您正在为动画循环使用 setInterval
。
这很可能是代码无法完成调用计算等的原因。您冒着堆叠调用的风险 - 对于上下文,这意味着您可以拥有相互重置的路径。
首先尝试将 setInterval
替换为 setTimeout
。您当然需要从代码中再次重新触发它 - 更好的是,将所有内容放在函数末尾带有 setTimeout 的函数中,即:
function animate() {
//... calcs and redraws which you have in setInterval
setTimeout(animate, 0);
}
animate();
我在此测试中使用 0 作为超时。 setTimeout/setInterval
在任何情况下都不会同步到屏幕刷新率。
如果这行得通,那么您就知道原因了。下一步是用 requestAnimationFrame
替换它,但让我知道它是怎么回事。
为了说明问题,我们可以看一下这张图:
每个 block 代表循环内的一个函数,一个循环是一种颜色。请记住,setInterval
以固定 间隔调用,而 setTimeout
调用相对 调用时间。在此示例中,功能在时间预算内执行,因此一切顺利。
在下图中:
支出超出预算,因此再次调用 setInterval
并在第一个循环完成之前将下一个调用排队到第二个循环。当在调用之间处理队列时,您最终可能会冒着让两个函数“同时”处理上下文的风险(或者以与您预期不同的顺序出现)。
Javascript 当然是单线程的,所以它们不会同时执行,但一个会等待 - 如果在最后一个 block 有时间调用之前调用下一个队列的第一个 block ,那么第一个 block 将修改上下文,甚至可能在调用上一个调用的最后一个调用之前更改路径。随着时间的推移,滞后会增加,并且有可能(除非一些额外的可用处理资源时不时地解决队列 - 在繁忙的系统上,这种情况不太可能发生)随着更多堆栈的发生而变得越来越糟。
即,在这种情况下,您可以在 arc
填充之前使用 beginPath()
将行添加到上下文中。
(希望有任何意义...)
使用 setTimeout
可以防止这种情况发生,因为它不会在动画循环中的所有调用返回之前执行。更好的选择是使用 requestAnimationFrame
因为这将在可能的情况下与屏幕刷新率同步调用。它的级别更低,因此也更高效。
另一条路径(没有双关语意)是使用 Web-workers做计算。这将是多线程的,并且可以提高整体性能,因为网络 worker 不会影响 UI 线程。
关于javascript - 为什么 canvas2d 上下文不再填充省略号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16800547/
出现以下错误 Network access for Distributed Transaction Manager (MSDTC) has been disabled. Please enable D
在调试应用程序时出现以下错误。 The CLR has been unable to transition from COM context 0x3b2d70 to COM context 0x3b2
在 GAE Go 中,为了记录,我们需要使用 appengine.NewContext(r) 创建一个新的上下文,它返回 context.Context。 如何使用此上下文在请求范围内设置/获取变量?
我想使用 Puppeteer 从放置在页面上 iframe 内的选择器中获取数据,该页面在与其父框架域不同的域上运行。因此,我不是任何域的所有者 - 无法使用 frame.postMessage。 试
我正在尝试获取可用的应用程序上下文并想切换到 webview 上下文,但 appium 仅获取 Navive App。 应用程序还启用了 WebView。 Appium 版本:1.10.1 Chrom
这个问题在这里已经有了答案: How to fix this nullOk error when using the flutter_svg package? (7 个回答) 7 个月前关闭。 当我尝
我观看了关于 Core Data 的 2016 WWDC 视频并查看了各种教程。我见过使用 Core Data Framework 创建对象以持久保存到 managedObjectContext 中的
这是代码 obj = { a: 'some value'; m: function(){ alert(this.a); } } obj.m(); 结果是'som
我正在尝试做类似的事情 $(".className").click(function() { $(this).(".anotherClass").css("z-index","1");
var User = { Name: "Some Name", Age: 26, Show: function() { alert("Age= "+this.Age)}; }; fun
我目前正在使用我见过的常见 Context 模式,它允许子组件通过传递修饰函数来更新父组件的状态(即 Provider)通过共享的 Context。 我遇到的问题是,修改函数只引用原始状态,不引用最新
有没有办法让 React Context类型安全与流类型? 例如: Button.contextTypes = { color: React.PropTypes.string }; 最佳答案 不幸
我想知道是否有一种方法可以为不同的功能使用不同的上下文类。 我希望有一个功能使用 MinkExtensions 进行浏览器测试,另一个功能使用和 HTTP 客户端(如 Guzzle)进行 API 测试
我有这个配置文件 apiVersion: v1 clusters: - cluster: server: [REDACTED] // IP of my cluster name: stag
我在实现非抢先式调度时遇到了用于初始化TCB的代码。 typedef struct TCB_t { struct TCB_t *next; struct TCB_t
我想将一个函数设置为数组中每个元素的属性,但使用不同的参数调用它。我想我会使用匿名函数来解决它: for ( var i = 0; i < object_count; i++ ) { obje
这个问题已经有答案了: How to access the correct `this` inside a callback (15 个回答) 已关闭 7 年前。 我正在做一些练习,但我在管道方法中丢
我正在尝试通过 Java 和 Android Studio 学习和制作 Android 应用程序。我对Java的了解程度是两年前几个小时的youtube学习和大学基础类(class)。不过我确实知道如
我在(这个)上遇到了问题。错误ImageView无法应用。我在 fragment 类中执行此代码。 ViewFlipper v_flipper; @Nullable @Override public
我想使用 openGL 的某些功能,但与渲染视觉内容无关。有没有办法在没有任何依赖性的情况下创建它(不是对 Windows,也不是某些包[SDL,SFML,GLUT])?只允许使用没有外部库的库,就像
我是一名优秀的程序员,十分优秀!