我正在尝试定期更新使用html5和javascript制作的条形图 [英] I'm trying to periodically update a bar graph made with html5 and javascript

问题描述

我第一次涉足html5时，我正试图为游戏Farkle制作一个记分牌。

For my first foray into html5, I'm trying to make a scoreboard for the game Farkle.

我已经想出如何让人看起来很蹩脚但功能齐全多达五个玩家的图形系统，但我无法弄清楚如何更新它而不仅仅是绘制旧条形图。

I have figured out how to make a lame looking but functional graph system for up to five players, but I cannot figure out how to have it update without simply drawing over the old bar graphs.

我意识到我的代码可能很多更好，但我不想写辅助函数，直到我确定它是如何工作的。

I realize that my code could be much better, but I didn't want to write helper functions until I was sure how it would work.

我正在使用按钮触发得分功能适合现在的玩家，
但是我想更加自动化。

I'm using buttons to trigger the "score"function for the appropriate player for now, but I would like to be more automatic.

这是一个工作版本，这样你就可以看到我的问题了。
http://jsfiddle.net/kaninepete/dnsuj/1/

Here is a "working" version, so that you can see my problem. http://jsfiddle.net/kaninepete/dnsuj/1/

推荐答案

对于图形化的东西，我将我的代码组织成一个setup（）函数，以及一个被反复调用的draw（）函数，像这样：

For graphical stuff, I organize my code into a setup() function, and a draw() function that gets called repeatedly, something like this:

function setup(){
    // set up variables you in draw, here
    // examples include initial document width and height, and things
    // like that (although those in particular would go in draw if you
    // want to handle the resize event.

    context = document.getElementById("canvas").getContext('2d');
}

function draw(){
    // clear the canvas
    context.clearRect(0, 0, docWidth, docHeight);

    // now redraw your bar graph
    // ...
}

setup();

setInterval("draw();", 60);

你知道我要去哪儿吗？

这篇关于我正在尝试定期更新使用html5和javascript制作的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！