js设计网格，并且线条可以移动

下面是一个简单的使用 HTML5 canvas 和 JavaScript 实现可移动线条的网格示例：

1. HTML 代码：

<canvas id="myCanvas" width="500" height="500"></canvas>

2. JavaScript 代码：

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

var gridSpacing = 20;
var gridWidth = canvas.width;
var gridHeight = canvas.height;

function drawGrid(){
    ctx.beginPath();
    ctx.strokeStyle = "#cccccc";

    for(var x=0; x<=gridWidth; x+=gridSpacing){
        ctx.moveTo(x, 0);
        ctx.lineTo(x, gridHeight);
    }

    for(var y=0; y<=gridHeight; y+=gridSpacing){
        ctx.moveTo(0, y);
        ctx.lineTo(gridWidth, y);
    }

    ctx.stroke();
}

function drawLine(x, y){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();

    ctx.beginPath();
    ctx.strokeStyle = "#ff0000";
    ctx.moveTo(x, 0);
    ctx.lineTo(x, gridHeight);
    ctx.stroke();
}

canvas.addEventListener("mousemove", function(e){
    var mouseX = e.pageX - canvas.offsetLeft;
    var mouseY = e.pageY - canvas.offsetTop;

    drawLine(mouseX, mouseY);
});

这段代码首先定义了 gridSpacing、gridWidth 和 gridHeight 变量来指定网格的间距和宽度、高度。然后定义了一个名为 drawGrid 的函数，该函数使用循环绘制一组水平和垂直线条，以形成网格。然后定义了一个名为 drawLine 的函数，该函数接受鼠标的当前位置作为参数，并使用 ctx 清除 canvas 上的图像，然后绘制一个垂直线条通过该位置。最后，将 drawLine 函数绑定到 canvas 的 mousemove 事件上，以便该函数在鼠标移动时被调用。

此外，为了使线条能够移动，我们需要在 drawLine 函数中先使用 ctx 清除 canvas 上的图像，然后再调用 drawGrid 函数重新绘制网格。这样可以防止线条在移动时留下残留的轨迹。

以上就是一个简单的使用 HTML5 canvas 和 JavaScript 实现可移动线条的网格示例。