如何在html 5画布中自由绘制直线并获取直线的坐标？

Question

如何在html 5画布中画一条线？

我想绘制一个矩形但是如何绘制一条直线。这是我的代码。

return Datatables::of($this->clubs->getForDataTable())

以上代码用于绘制矩形，请修改代码以绘制直线。

Answer 1

<强>样本

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//add event listner to canvas
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
var mouseDown = false;
var points = [];
var lines = [];
var linePoint = [];
var stPoint;
var endPoint;

var imageObj = new Image();
imageObj.onload = function() {
   ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


function Point(x, y) {
    this.x = x;
    this.y = y;
}

function lineP(stPoint, endPoint) {
    this.stPoint = stPoint;
    this.endPoint = endPoint;
}

function mouseDown(e) {
    mouseDown = true;
    stPoint = new Point(e.layerX, e.layerY); //get start point for line
}

function mouseMove(e) {
    if (!mouseDown) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); //redraw image
    drawLines(); //draw previous lines
    ctx.beginPath();
    ctx.moveTo(stPoint.x, stPoint.y);
    ctx.lineTo(e.layerX, e.layerY);
    ctx.stroke();
    ctx.closePath();
}

function mouseUp(e) {
    mouseDown = false;
    endPoint = new Point(e.layerX, e.layerY); //get end point
    linePoint.push(new lineP(stPoint, endPoint)); //store line points for next draw
    console.log(linePoint);
}

//draw all lines from stored point
function drawLines() {
    linePoint.forEach(function(item) {
        ctx.beginPath();
        ctx.moveTo(item['stPoint'].x, item['stPoint'].y);
        ctx.lineTo(item['endPoint'].x, item['endPoint'].y);
        ctx.stroke();
        ctx.closePath();
    })
}

canvas {
 border: 1px solid #999;
}

<canvas id="canvas" width="300" height="300"></canvas>

在鼠标按下存储行的起始值和鼠标向上存储终点的行。 (event.layerX,event.layerY)会让这一点变得更加重要。