画布在设置间隔后仍未更新
画布在设置间隔后仍未更新
提问于 2018-01-15 10:56:38
正如主题所述。我设置了间隔，让JavaScript有机会更新我的画布，但它就是不会。我没有使用它的经验，但我正在“检查”的变量(尝试切换，但只是中断)有正确的值-它们是通过服务器端的flask-socketio websocket使用第三方库返回的。
代码如下所示，变量是“全局的”，所以它们应该在相同的作用域中，我不确定if语句，也许它们只是在JS中不像那样工作？由于未知的原因，我在使用switch时遇到了问题(我通常用C、Python或C++编写代码……)
我怀疑我的填充风格不会改变，我只是不知道为什么。
编辑:尝试将代码最小化一点。
编辑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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-15 11:26:52
这是一个几乎最小的例子，希望能对你有所帮助。有关信息，请参见代码中的注释。
// 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);
});<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" />
Stack Overflow用户
发布于 2018-01-15 11:28:09
试一试
window.setInterval(function(){
//your code
}, YOUR_INTERVAL_TIME_IN_MS);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48256380
复制相关文章
相似问题
腾讯云开发者
