# 怎么让任意区间的数据,根据上下限值生成符合日常习惯的刻度值?

1.4k 次浏览

``````

<html lang="en-US">

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>

input {
width:250px;height:50px;
font-size:24px;;
}
</style>
<body>
<canvas id=c width=600 height=400px style="border:1px solid grey"></canvas>
<form name='f' >

</form>
<script>
function rand(min, max) {
var range = max - min + 1;
return Math.floor(Math.random() * range + min);
}

var myCanvas = document.getElementById("c");
var c = myCanvas.getContext("2d");

var w = 600;
var h = 400;

function draw() {

c.clearRect(0, 0, w, h);

var max = parseInt(document.f.max.value);
var min = parseInt(document.f.min.value);

var ratio = (max - min) / w;

var tickSize = 50;

var tickCnt = Math.ceil(w / tickSize);

var unit = tickSize * ratio;

c.moveTo(0, h - 30);
c.lineTo(w, h - 30);

for (var i = 0; i < tickCnt; i++) {
c.moveTo(0 + tickSize * i, h - 30);
c.lineTo(0 + tickSize * i, h - 20);
c.textAlign = 'center';
c.fillText((min + unit * i).toFixed(2), 0 + tickSize * i, h - 10);

}
c.stroke();
}

</script>
</html>  ``````

tablecell 1.5k
2015-12-13 提问
1 个回答