Canvas How to - Click two points and link with line

Question

We would like to know how to click two points and link with line.

Answer


<!--from www . j  a  va 2s .  co m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.js'></script>
<style type='text/css'>
canvas {
  border: 1px dashed rgb(200, 200, 200);
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

The code above is rendered as follows: