描画アプリケーションで描画するときにマウスイベントの配列を表示する - HTML

Question

マウスの配列座標をキャンバスに取得しようとしましたが、試してみると線/描画が表示されません。とにかくそれらを表示する配列を取得するにはありますか？あなたがタイプミスfor (var i = 0; l = pointX.lenght; i<l; i++)を持って

 
 

 
var drawMouse = function() { 
 
\t var clicked = 0; 
 

 
\t 
 
\t var start = function(e) { 
 
\t \t var pointX = []; 
 
\t \t var pointY = []; 
 
\t \t clicked = 1; 
 
\t \t ctx.beginPath(); 
 
\t \t x = e.pageX; 
 
\t \t y = e.pageY-44; 
 
\t \t ctx.moveTo(x,y); 
 
\t }; 
 
\t var move = function(e) { 
 
\t \t if(clicked){ 
 
\t \t \t x = e.pageX; 
 
\t \t \t y = e.pageY-44; 
 
\t \t \t ctx.lineTo(x,y); 
 
\t \t \t ctx.stroke(); 
 
\t \t \t pointX.push(x); 
 
\t \t \t pointY.push(y); 
 
\t \t \t 
 
\t \t } \t 
 
\t }; 
 
\t 
 
\t var stop = function(e) { 
 
\t \t clicked = 0; 
 
\t \t 
 
\t \t var coords = document.getElementById("coords"); 
 
\t \t for (var i = 0; l = pointX.lenght; i<l; i++){ 
 
\t \t coords.innerHTML += pointX[i]+ "-" + pointY[i]+ "<br/>"; 
 
\t \t } 
 
\t }; 
 

 
    document.getElementById("canvas").addEventListener("mousedown", start, false); 
 
\t document.getElementById("canvas").addEventListener("mousemove", move, false); 
 
\t document.addEventListener("mouseup", stop, false); 
 
};

Answer 1

var clicked = 0; 
 
var pointX = []; 
 
var pointY = []; 
 
var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext('2d'); 
 
var start = function(e) { 
 
    clicked = 1; 
 
    ctx.beginPath(); 
 
    x = e.clientX - canvas.offsetLeft; 
 
    y = e.clientY - canvas.offsetTop; 
 
    ctx.moveTo(x, y); 
 
}; 
 
var move = function(e) { 
 
    if (clicked) { 
 
    x = e.clientX - canvas.offsetLeft; 
 
    y = e.clientY - canvas.offsetTop; 
 
    ctx.lineTo(x, y); 
 
    ctx.stroke(); 
 
    pointX.push(x); 
 
    pointY.push(y); 
 

 
    } 
 
}; 
 

 
var stop = function(e) { 
 
    clicked = 0; 
 
    var coords = document.getElementById("coords"); 
 
    for (var i = 0, l = pointX.length; i < l; i++) { 
 
    coords.innerHTML += pointX[i] + "-" + pointY[i] + "<br/>"; 
 
    } 
 
}; 
 

 
document.getElementById("canvas").addEventListener("mousedown", start, false); 
 
document.getElementById("canvas").addEventListener("mousemove", move, false); 
 
document.addEventListener("mouseup", stop, false);

canvas{ 
 
border : 2px solid black; 
 
}

<canvas id='canvas' width=300 height=300></canvas> 
 
<p id='coords'></p>

、あなたはキャンバスに描画するために使用されるオフセットfor (var i = 0, l = pointX.length; i<l; i++)、マウスポインタに変更する必要があります。