您是否知道帆布的一些最佳实践？

请在此主题中添加您所了解,已经学习或在线阅读任何和所有Canvas最佳实践,性能提示/技巧

随着Canvas仍然是互联网的新手,并且没有任何迹象表明我将来可以看到,它没有太多记录在案的"最佳实践"或其他非常重要的技巧,这些技巧对于开发来说是"必须知道的"它在任何一个特定的地方.像这样的事情散落在不太知名的地方,很多次.

人们需要了解的东西太多了,而且还要学到很多东西.

我想分享一些东西,以帮助那些正在学习Canvas的人,也许还有一些已经非常了解它的人,并希望从其他人那里获得一些关于他们认为最佳实践或其他使用HTML5中的Canvas的提示和技巧的反馈.

我想从一个我个人认为对开发人员来说非常有用但非常罕见的事情开始.

1.缩进代码

就像你在任何其他时间一样,无论情况如何,用任何其他语言.它是其他一切的最佳实践,我发现在复杂的画布应用程序中,在处理几个不同的上下文和保存/恢复状态时,事情会变得有些混乱.更不用说代码更具可读性和整体清晰度.

例如:

...
// Try to tell me this doesn't make sense to do
ctx.fillStyle = 'red';
ctx.fill();
ctx.save();
    if (thing < 3) {
        // indenting
        ctx.beginPath();
            ctx.arc(2, 6, 11, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.beginPath();
            ctx.moveTo(20, 40);
            ctx.lineTo(10, 200);
            ctx.moveTo(20, 40);
            ctx.lineTo(100, 40);
        ctx.closePath();
        ctx.save();
            ctx.fillStyle = 'blue'
            ctx.fill();
        ctx.restore();
    } else { 
        // no indenting
        ctx.drawImage(img, 0, 0, 200, 200);
        ctx.save();
        ctx.shadowBlur();
        ctx.beginPath();
        ctx.arc(2, 60, 10, 0, Math.PI*2, false);
        ctx.closePath();
        ctx.fillStyle 'green'; …

如果找到新用户或现有用户有新连接,我想在每个AJAX请求上更新我的画布.

我有他们之间的用户和连接:

 var data=[
           {
              "Id": 38,
               "Connections":[39,40],
               "Name":"ABc"
          },
           {
              "Id": 39,
               "Connections":[40],
               "Name":"pqr"
           },
           {
               "Id": 40,
               "Connections":[],
               "Name":"lmn"
           }]

在上面的示例中,用户Id:38已连接到user 39 and 40并且user 39 is connected to user 40 and user 40已连接到user 39 and user 38 so user 40 Connection array is blank.

我有一个Web服务,我将每1-2秒触发一次,以显示此页面上新加入的用户以及我存储在我的表中的现有用户之间的新连接,此Web服务将获取所有用户及其连接.

所以首先我的页面会加载,但之后我的页面将不会刷新,新的用户应该显示,新的连接应该与AJAX调用连接到我的Web服务.

但是随着ajax请求,一切都搞砸了.这是我创建的JSBin.

输出我得到:

我只有4个用户和3个连接,你可以在我的JSBin输出中看到它应该只有4个矩形,我不是添加更多的用户,但仍然得到这个混乱的输出.

源代码参考:参考小提琴

我试图获得输出,如上面的小提琴,但没有得到.

预期输出:4个带动画的矩形

更新了Js bin Demo:更新了JSBin

使用上面更新的JSBin我得到这个输出,但他们没有移动(动画不工作):

我想知道我是否应该将游戏切换到requestAnimationFrame.如果还有理由再这样做了,正如我读到的那样,当你在主流浏览器中切换标签时,setTimeout()现在也会暂停.

无论如何,说我想控制动画的FPS.

目前我可以这样做:

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000 / k.settings.engine.fps );

k.settings.engine.fps想要的fps 在哪里？

如果我这样做requestAnimationFrame,我就失去了这种可能性,它只会给我任何可以给予的东西:

window.requestAnimFrame(k.operations.startLoop);
renderLoop();

我看到有人建议将requestAnimFrame放在另一个循环中:

setInterval( function () {
    requestAnimationFrame( draw );
}, 1000 / 60 );

那么......我该怎么办？保持原状？

requestAnimationFrame有什么好处,现在切换标签时setTimeout也暂停了？

我想用工作正常的标记显示比例。最重要的是，我还想用红色指示器在比例尺中显示鼠标位置。

因此，我在运行应用程序时绘制画布，然后在更改鼠标位置时重新绘制整个画布。

我是画布的新手，不明白我的代码有什么问题。我一直试图解决它，但没有运气。

问题可能出在这个函数中，

 function drawBlackMarkers(y, coordinateMeasurment){
    const markHightY = scaleTextPadding.initial;
    ctxLeft.moveTo(coordinateMeasurment, y + markHightY);
    ctxLeft.lineTo(completeMarkHight, y + markHightY);
  }

我有一个很大的for 循环意味着要经过很多次迭代，在该循环中我多次调用drawBlackMarkers函数，如下所示。

function setMarkers(initialValY, rangeValY, coordinateMeasurmentr, divisableVal,
    scaleCountStartValueOfY, scaleCountRangeValueOfY) {
    let count = 0;
    // re-modifying scale staring and ending values based on zoom factor
    const scaleInceremnt = scaleIncementValue;
    for (let y = (initialValY), scaleCountY = scaleCountStartValueOfY;
      y <= (rangeValY) && scaleCountY <= scaleCountRangeValueOfY;
      y += scaleInceremnt, scaleCountY += incrementFactor) {


      switch (count) {
        case displayScale.starting: …