キャンバス上でマウスの動きを再描画する方法は？

Question

私はタプルの配列をjavascriptに持っています。ユーザーが行ったマウスの動きを表示するための既存のライブラリはありますか？

理想的には、取得したデータを最初から最後まで再生することができます。ビデオプレーヤーのように見えます（再生、一時停止、再生速度の調整）が、ビデオの代わりにマウスカーソルがどのように動いたかがわかります。この視覚化は、HTML5キャンバス（つまり、黒のHTMLキャンバスで移動するカーソルを表す白いピクセルの四角形）上にあります。

Answer 1

ライブラリなしで実行するのに十分簡単です。

• ポイントアレイ要求
• に各マウスの位置を追加、のMouseMoveイベントのMouseMoveで
• をリッスンし、点列からの各点を再描画​​ループを実行します。

例コードとデモ：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var isDown=false; 
 
var points=[]; 
 
var nextTime=0; 
 
var nextN=0; 
 
var duration=1000/60; 
 
ctx.lineCap='round'; 
 

 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUpOut(e);}); 
 
$("#canvas").mouseout(function(e){handleMouseUpOut(e);}); 
 

 
$('#fast').on('click',function(){ duration=1000/60; beginRedrawing(); }); 
 
$('#slow').on('click',function(){ duration=1000/15; beginRedrawing(); }); 
 

 
function beginRedrawing(){ 
 
    if(points.length<2){return;} 
 
    nextN=1; 
 
    ctx.lineWidth=3; 
 
    ctx.strokeStyle=randomColor(); 
 
    requestAnimationFrame(redraw); 
 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get current mouse position 
 
    ctx.lineWidth=7; 
 
    ctx.strokeStyle='black'; 
 
    points.length=0; 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    points.push({x:mouseX,y:mouseY}); 
 
    // Set dragging flag 
 
    isDown=true; 
 
} 
 

 
function handleMouseUpOut(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get current mouse position   
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    // Clear dragging flag 
 
    isDown=false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!isDown){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get current mouse position 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    points.push({x:mouseX,y:mouseY}); 
 
    var n=points.length-1; 
 
    lineSegment(points[n-1],points[n]); 
 
} 
 

 
function lineSegment(p0,p1){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(p0.x,p0.y); 
 
    ctx.lineTo(p1.x,p1.y); 
 
    ctx.stroke(); 
 
} 
 

 
function redraw(time){ 
 
    if(nextN>points.length-1){return;} 
 
    if(time<nextTime){requestAnimationFrame(redraw);return;} 
 
    nextTime=time+duration; 
 
    lineSegment(points[nextN-1],points[nextN]); 
 
    nextN++; 
 
    requestAnimationFrame(redraw); 
 
} 
 

 
function randomColor(){ 
 
    return('#'+Math.floor(Math.random()*16777215).toString(16)); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag to create polyline then click a redraw button below.</h4> 
 
<button id=fast>Fast Redraw</button> 
 
<button id=slow>Slow Redraw</button> 
 
<br> 
 
<canvas id="canvas" width=512 height=512></canvas>

Answer 2

あなたが説明したことを行うライブラリはわかりませんが、位置の配列を作成して使用すると、おおよそのことができます。

//Capture all mouse movements on the browser window. 
document.onmousemove = mousePos; 

//Store all previous mouse locations 
var ary = []; 

function mousePos (e) { 

    //Log the current mouse position 
    ary.push({X: e.pageX, Y: e.pageY}); 
} 

これで、マウスの動きを得るために配列をループすることができます。

function replay() { 

    for (var i = 0; i < ary.length; i++) { 

    //Draw a point wherever the mouse moved. 
    ctx.fillRect(ary[i].X, ary[i].Y, 2, 2); 
    } 
} 

あなたが好きな速度で再生するには、再生時間を遅らせて追加できます。