Javascript 如何创建动态网格_Javascript_Css_Math_Canvas_Grid

Javascript 如何创建动态网格

javascript css math canvas grid

Javascript 如何创建动态网格,javascript,css,math,canvas,grid,Javascript,Css,Math,Canvas,Grid,我正在尝试使用动态宽度和高度创建网格。确保每个单元格区域宽度和高度相等的公式是什么？以下是@Teepemm的想法，并将其转化为代码如果希望所有宽度与其他宽度相同，且所有高度与其他高度相同： var xSpan=cw/lineCount; var ySpan=cw/lineCount; 如果需要方形单元格（宽度==高度），则只需使用1个跨度。注意：在这种情况下，单元格的底行可能不是正方形： var span=cw/lineCount; 下面是代码和演示：正文{背景色：象牙；} #包装器{

我正在尝试使用动态宽度和高度创建网格。确保每个单元格区域宽度和高度相等的公式是什么？

以下是@Teepemm的想法，并将其转化为代码

如果希望所有宽度与其他宽度相同，且所有高度与其他高度相同：

var xSpan=cw/lineCount;
var ySpan=cw/lineCount;

如果需要方形单元格（宽度==高度），则只需使用1个跨度。注意：在这种情况下，单元格的底行可能不是正方形：

var span=cw/lineCount;

下面是代码和演示：


正文{背景色：象牙；}
#包装器{位置：相对；}
画布{位置：绝对；左：40px；顶部：5px；边框：1px纯红色；}
#金额{位置：绝对；左侧：1px；顶部：5px；页边距底部：15px；宽度：23px；边框：0；颜色：#f6931f；字体重量：粗体；}
#滑块垂直{位置：绝对；左侧：5px；顶部：40px；宽度：15px；高度：225px；边框：0px；颜色：#f6931f；字体重量：粗体；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var$金额=$（“金额”）；
$（“#滑块垂直”）。滑块({
方向：“垂直”，
射程：“分钟”，
民:2,，
最高：30，
数值：10，
幻灯片：功能（事件、用户界面）{
var值=ui.value；
$amount.val（价值）；
绘制网格（值）；
}
});
$amount.val（$（“#滑块垂直”）。滑块（“值”）；
牵引格栅（10）；
函数drawGrid（lineCount）{
var xSpan=cw/行数；
var ySpan=连续波/行数；
ctx.clearRect（0,0，cw，ch）；
ctx.save（）；
if（lineCount/2==parseInt（lineCount/2））{
ctx.translate（.5,5）；
}
ctx.beginPath（）；
对于（var i=0；i）您在谈论哪个网格？请指定您正在使用的框架或给出任何其他提示。否则我们只能猜测…将宽度和高度除以该方向上的单元格数？这太棒了！所以..如果画布尺寸不是完美的300x300呢？如果它类似于300x250呢？
<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; }
      #wrapper{ position:relative; }
      canvas{ position:absolute; left:40px; top:5px; border:1px solid red;}
      #amount{ position:absolute; left:1px; top:5px; margin-bottom:15px; width:23px; border:0; color:#f6931f; font-weight:bold; }
      #slider-vertical{ position:absolute; left:5px; top:40px; width:15px; height:225px; border:0px; color:#f6931f; font-weight:bold; }
  </style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(function() {

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    var $amount=$("#amount");

    $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: 2,
      max: 30,
      value: 10,
      slide: function( event, ui ) {
        var value=ui.value;
        $amount.val(value);
        drawGrid(value);
      }
    });

    $amount.val( $( "#slider-vertical" ).slider( "value" ) );
    drawGrid(10);


    function drawGrid(lineCount){
        var xSpan=cw/lineCount;
        var ySpan=cw/lineCount;
        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        if(lineCount/2===parseInt(lineCount/2)){
            ctx.translate(.5,.5);
        }
        ctx.beginPath();
        for(var i=0;i<lineCount;i++){
            var x=(i+1)*xSpan;
            var y=(i+1)*ySpan;
            ctx.moveTo(x,0);
            ctx.lineTo(x,ch);
            ctx.moveTo(0,y);
            ctx.lineTo(ch,y);
        }
        ctx.lineWidth=0.50;
        ctx.stroke();
        ctx.restore();
    }

  });   // end $(function(){});

  </script>
</head>
<body>
    <div id="wrapper">
        <input type="text" id="amount" />
        <div id="slider-vertical"></div>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>
</body>
</html>