如何使用HTML绘制数字行

Question

我们需要绘制一个与此处显示的数字线非常相似的数字线.范围如下.

1. 绘制上页中指定的行(带有一系列数字)
2. 能够询问用户输入(例如某个点的数字或某个数字之前或之后的数字)
3. 为线/数字提供不同的颜色

什么样的抽象可以帮助我们以简单的方式做到这一点？(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();
    }
  }
});

看到行动

我想你可以根据你的要求添加你自己的模块:)