我们要求绘制一条与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();
}
}
});
我想你可以根据你的要求添加你自己的模块:)
