html5 页面鼠标画线,在HTML5画布上点击两次鼠标画一条线？

的代码非常简单W3Schools的例子，但你必须得到一个良好的基础：

JavaScript：

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];

};