消灭零回复。。。。。。。。。。。。。。。。。。。。。

这个数字之间的连线是怎么实现的？

aeeee

845797142

发布于
2016-09-19

图片描述

javascript css html

阅读 3.8k

5 个回答

逍遥乡

✓ 已被采纳

用在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>

Chrome中的效果