HTML5畫布符合兩個鼠標繪製點擊

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

這是畫線用兩個鼠標clicks.But我不知道在按鈕啥子叫（我有各種工具工具欄）HTML5畫布符合兩個鼠標繪製點擊

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

代碼

請幫忙提前致謝！

來源

2014-10-02 Stanislav Iliev

我修改了你的代碼來糾正它。試試.... :)

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

來源

2014-12-19 09:23:35

HTML5畫布符合兩個鼠標繪製點擊

回答

相關問題