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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用HTML绘制数字行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们要求绘制一条与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

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

原文链接:https://www.f2er.com/html/426681.html

猜你在找的HTML相关文章