点击2张图片后如何画线答案

【问题标题】：How to draw line after click 2 images点击2张图片后如何画线
【发布时间】：2014-06-06 19:32:09
【问题描述】：

我是 javascript 程序员的初学者，我无法将图像添加到画布这条线将连接已单击的两个图像？我很困惑如何根据所需画布的坐标添加图像？我可以使用函数 kineticjs 来添加图像并组织坐标吗？请帮我这是添加画布和画线的html代码

<html>
<head>
<style>
canvas {
    border: 1px dashed rgb(200, 200, 200);
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src = "kinetic-v4.5.4.min.js"></script>
<script defer = "defer">
var clicks = 0;
var lastClick = [0, 0];
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return [x, y];
}

function drawLine(e) {
    context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } else {

        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);
        context.strokeStyle = '#000000';
        context.stroke();
        clicks = 0;
    }

    lastClick = [x, y];
};
</script>

</body>
</html>

【问题讨论】：

标签： javascript canvas

【解决方案1】：

是的，您可以使用 KineticJS 添加图像、线条和更多形状。

您还可以将事件（单击、双击、dragstart、dragmove 等）附加到这些形状并根据它们的坐标执行操作。

看看这个教程关于 Adding an image using KineticJS，以及this问题的答案。

【讨论】：