html5实现拖动直线,HTML5 能跟踪鼠标移动的线条阵列

可以使用 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 drag = false;
var startX = 0;
var startY = 0;

canvas.addEventListener("mousedown", function(e){
    drag = true;
    startX = e.pageX - canvas.offsetLeft;
    startY = e.pageY - canvas.offsetTop;
});

canvas.addEventListener("mouseup", function(e){
    drag = false;
});

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

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();

        startX = mouseX;
        startY = mouseY;
    }
});

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

    for(var i=0; i<canvas.width; i+=20){
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(x, y);
        ctx.stroke();
    }

    for(var j=0; j<canvas.height; j+=20){
        ctx.beginPath();
        ctx.moveTo(0, j);
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

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

    drawLineArray(mouseX, mouseY);
});

这段代码将创建一个 canvas 元素和一个 2D 绘图上下文对象 ctx。它还定义了一个 drag 变量来跟踪鼠标是否被拖动，以及 startX 和 startY 变量来跟踪直线的起点。当鼠标按下时，drag 变量被设置为 true，并且 startX 和 startY 变量被设置为鼠标的位置。当鼠标释放时，drag 变量被设置为 false。当鼠标移动时，如果 drag 变量为 true，则计算出鼠标的当前位置，并使用 ctx 清除 canvas 上的图像，然后绘制一个从起点到当前位置的直线。

此外，这段代码还定义了一个名为 drawLineArray 的函数，该函数将在鼠标移动时调用。该函数接受鼠标的当前位置作为参数，并使用循环绘制一组垂直和水平线条，使它们都通过该位置。这样就可以实现跟踪鼠标移动的线条阵列。

以上就是一个简单的使用 HTML5 和 JavaScript 实现拖动直线和跟踪鼠标移动的线条阵列的示例。