javascript - 这个数字之间的连线是怎么实现的？
本文介绍了javascript - 这个数字之间的连线是怎么实现的？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
解决方案
用在HTML中简单实现了一下，用canvas，网格和数字标识你可以自己加。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="800px">
</canvas>
</body>
<script type="text/javascript">
var c= document.querySelector("#myCanvas");
var size = 20;
var space = 5;
var num = 20;
var cxt = c.getContext('2d');
cxt.fillStyle = "green";
var randoms = [];
for(var i=0;i<num;i++){
var offLeft = Math.random()*30*20;
randoms.push(offLeft);
cxt.fillRect(offLeft,i*(size+space),size,size);
}
cxt.moveTo(randoms[0]+size/2,size);
for(var i=1;i<randoms.length;i++){
cxt.lineTo(randoms[i]+size/2,i*(size+space));
cxt.moveTo(randoms[i]+size/2,i*(size+space)+size);
}
cxt.strokeStyle = 'orange';
cxt.stroke();
</script>
</html>
如果感觉有用的话，欢迎采纳
这篇关于javascript - 这个数字之间的连线是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
