javascript – 如何使用HTML绘制数字行

发布时间：2020-12-14 23:15:18 所属栏目：资源来源：网络整理

导读：我们要求绘制一条与here所示的数字线非常类似的数字线.范围如下. 绘制上页中指定的行(带有一系列数字) 能够询问用户输入(例如某个点的数字或某个数字之前或之后的数字) 为线/数字提供不同的颜色什么样的抽象可以帮助我们以简单的方式做到这一点？ (html5 ca

我们要求绘制一条与here所示的数字线非常类似的数字线.范围如下.

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

什么样的抽象可以帮助我们以简单的方式做到这一点？ (html5 canvas或jquery或javascript或任何其他可以生成HTML代码的框架)

最佳答案

使用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,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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!