鼠标单击两次即可绘制HTML5画布线条

Question

var clicks = 0;
var lastClick = [0, 0];

document.getElementById('imageView').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];
};

This is the code for drawing line with two mouse clicks.But i dont know waht to call in the button(i have a toolbar with various tools) 这是用两次鼠标单击绘制线条的代码。但是我不知道该调用什么按钮（我有一个带有各种工具的工具栏）

<input type="image" src="images/line.ico" width="25" height="25">

Please help Thanks in advance! 请帮助提前谢谢！

Answer 1

I modified your code to correct it. 我修改了您的代码以进行更正。 Try this.... :) 尝试这个.... ：）

<html>
<head><title></title>
<script>
 var clicks = 0;
 var lastClick = [0, 0];

var element;
function startDrawing()
{
    element = document.getElementById('imageView');
    if(element != null || element != undefined)
     {
          element.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>
    <input type="image" src="images/line.ico" width="25" height="25" onclick="startDrawing()">
    <!--Your image element will be here -->
</body>
</html>

鼠标单击两次即可绘制HTML5画布线条

问题描述

1 个解决方案

解决方案1
0 2014-12-19 09:23:35

鼠标单击两次即可绘制HTML5画布线条

问题描述

1 个解决方案

解决方案1 0 2014-12-19 09:23:35

解决方案1
0 2014-12-19 09:23:35