Question

正如主题所述。我已经设置了间隔，让JavaScript有机会更新我的画布，但事实并非如此。我没有使用它的经验，但我正在“检查”（尝试切换但刚刚断开）的变量具有正确的值 - 它们通过使用第三部分库的服务器端上的flask-socketio websocket返回。

代码如下所示，变量是“全局的”，因此它们应该在同一范围内，我不确定if语句，也许它们只是在JS中不那样工作？我在使用交换机时遇到了不明原因（我通常用C或Python或C ++编写代码......）

我怀疑我的fillstyle没有改变，我只是不知道为什么。

编辑：尝试稍微减少代码。

编辑2：应该对填充样式有一些影响的变量“af3_level”每1秒更改一次，然后通过套接字发送（它的值是100％正确）。

编辑3：问题是“拼写错误”（或者可能不是拼写错误）。它是fillStyle，而不是fillstyle。

<script type="text/javascript" charset="utf-8">
    var af3_level;
    $(document).ready(function() {            
        namespace = '/emotiv';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('connect', function() {
            socket.emit('my_emo_event', {data: 'I\'m connected to emotiv_info'});
        });            
        socket.on('emotiv_response', function(msg) {
            $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
        });
        socket.on('emo_headgear_data', function(msg) {
          af3_level = msg.af3;
          $('#emotiv_log').html("some text" + af3_level);
          //draw();
        });            
        $('form#emotiv_connect').submit(function(event) {
            socket.emit('emotiv_connect');
            return false;
        });
        $('form#emotiv_disconnect').submit(function(event) {
            socket.emit('emotiv_disconnect');
            return false;
        });
    });
    var canvas_handle=document.getElementById("connection_quality_canvas");
    var ctx = canvas_handle.getContext("2d");
    setInterval(drawSomething, 1000);
    function drawSomething(){
      ctx.clearRect(0,0,canvas_handle.width,canvas_handle.height);
      ctx.beginPath()
      ctx.arc(250,250,250,0,2*Math.PI);
      ctx.stroke();
      ctx.beginPath()
      ctx.moveTo(250,0);
      ctx.lineTo(250,500);
      ctx.stroke();
      ctx.beginPath()
      ctx.moveTo(0,250);
      ctx.lineTo(500,250);
      ctx.stroke();
      //AF3
      ctx.beginPath()
      ctx.moveTo(150,55);
      ctx.arc(125,55,25,0,2*Math.PI);
      if(af3_level == 1) {
        ctx.fillstyle = "red";
      }
      else if(af3_level == 2) {
        ctx.fillstyle = "yellow";
      }
      else if(af3_level == 4) {
        ctx.fillstyle = "green";
      }
      else {
        ctx.fillstyle = "black";
      }
      ctx.fill();
      ctx.stroke();
    }
</script>

Answer 1

这是一个几乎最小的例子，希望能帮到你。请参阅代码中的注释以获取信息。

＆＃13;

// Declaring global variables
var
  canvas_handle,
  ctx;
// Declaring global functions
function drawSomething(){
  var
    posX = Math.floor(Math.random()*canvas_handle.width),
    posY = Math.floor(Math.random()*canvas_handle.height),
    level = Math.floor(Math.random()*3),
    style;

  ctx.clearRect(0,0,canvas_handle.width,canvas_handle.height);
  ctx.beginPath()
  ctx.moveTo(0,0);
  ctx.lineTo(posX,posY);
  ctx.lineTo(posX + 10 ,posY + 20);
  ctx.closePath();
  
  // This is how a switch-statement looks like:
  switch (level) {
    case 0 : style = '#f00'; break;
    case 1 : style = '#ff0'; break;
    case 2 : style = '#0f0'; break;
    default:
      style = '#000';
  }
  // Notice that the names are lineWith, strokeStyle, fillStyle, and not linewidth, strokestyle or filestyle.
  ctx.lineWidth=1;
  ctx.strokeStyle = '#888';
  ctx.fillStyle = style;
  ctx.fill();
  ctx.stroke();
}

$(document).ready(function() {
  // Running this code when the document has been loaded and
  // the elements are availible.
  canvas_handle=document.getElementById("connection_quality_canvas");
  ctx = canvas_handle.getContext("2d");
  setInterval(drawSomething, 500);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="connection_quality_canvas" width="500" height="200" />

＆＃13;

Answer 2

尝试

window.setInterval(function(){
    //your code
}, YOUR_INTERVAL_TIME_IN_MS);

即使在设置间隔后，画布也不会更新

2 个答案: