Question

我们需要绘制一个与here上显示的数字线非常相似的数字线。范围如下。

绘制上页中指定的行（包含一系列数字）
能够要求用户输入（例如某个点的数字或某个数字之前或之后的数字）
为行/数字提供不同的颜色

哪种抽象可以帮助我们以简单的方式做到这一点？（html5 canvas或jquery或javascript或任何其他可以生成HTML代码的框架）

Answer 1

使用Canvas元素，

$(function() {
  var canvas = $('canvas')[0];
  var ctx = canvas.getContext('2d');

  var w = canvas.width = 700;
  var h = canvas.height = 400;
  with(ctx) {
    fillStyle = '#000';
    fillRect(0, 0, w, h);
    fill();
    beginPath();
    lineWidth = 2;
    strokeStyle = '#f00';
    moveTo(w/7, h/2);
    lineTo(6*w/7, h/2);
    stroke();
    for(var i = -10;i <= 10; i++) {
      beginPath();
      strokeStyle = '#0f0';
      lineWidth = 2;
      moveTo(w/2 + i * 20, h/2 - 20);
      lineTo(w/2 + i * 20, h/2 + 20);
      fillStyle = '#ff0';
      fillText(i, (w/2 + i * 20 )- 5, h/2 + 35);
      if(!i) {
        lineWidth = 4;
        strokeStyle = '#f0f';
      }
      fill();
      stroke();
    }
  }
});

see in Action

我猜您可以根据您的要求添加自己的模块：）

Answer 2

我对Raphael.js做的并不多，但看起来真的很酷。

http://dmitrybaranovskiy.github.io/raphael/

如何使用HTML绘制数字行

2 个答案:

see in Action