###実現したい事
タブレット上にお絵かきアプリみたいなのを実装したいのですが、tauchmoveの反応が遅い気がします。例を挙げると「T」を書こうとすると1画目と2画目をくっつけて書いているつもりなのですが、タブレット上では1画目の横線と2画目の縦線が離れてしまいます。体感では「+」を書こうとするとキレイに「T」が書けるといった具合です。タブレット上に実装するとこの程度の遅延が発生するのは仕方のない事なのでしょうか?遅延をなくすか抑える方法が分かる方回答お願いします。
###ソース
JavaScript
1var drawing = false; 2var before_x = 0; 3var before_y = 0; 4var x; 5var y; 6var canvas = document.getElementById('canvas'); 7var ctx = canvas.getContext('2d'); 8canvas.addEventListener('touchmove',oekaki); 9canvas.addEventListener('touchstart', function(e) { 10 drawing = true; 11 var rect = e.target.getBoundingClientRect(); 12 before_x = Math.floor(e.clientX - rect.left); 13 before_y = e.clientY - rect.top; 14 ctx.beginPath(); 15 ctx.arc(before_x, before_y, 1, 0, Math.PI*2, true); 16 ctx.fill(); 17 ctx.beginPath(); 18 ctx.moveTo(x, y); 19}); 20 21canvas.addEventListener('touchend', function() { 22 drawing = false; 23}); 24 25function oekaki(e){ 26 // drawingがtrueじゃなかったら返す 27 if (!drawing){ 28 return 29 }; 30 var rect = e.target.getBoundingClientRect(); 31 x = Math.floor(e.touches[0].clientX - rect.left); 32 y = e.touches[0].clientY - rect.top; 33 ctx.strokeStyle = '#000'; 34 ctx.lineWidth = 2; 35 // 描画 36 ctx.lineCap = 'round'; 37 38 ctx.beginPath(); 39 ctx.moveTo(before_x, before_y); 40 ctx.lineTo(x, y); 41 ctx.stroke(); 42 ctx.closePath(); 43// 描画最後の座標を前回の座標に代入する 44 before_x = x; 45 before_y = y; 46}
回答1件
あなたの回答
tips
プレビュー