HTML5畫布繪製成爲在平板

鋸齒狀這裏是我的代碼：HTML5畫布繪製成爲在平板

var can = $('#signature')[0], 
    ctx = can.getContext('2d'), 
    mousePressed = false, 
    mouseX = 0, 
    mouseY = 0; 
can.addEventListener('touchmove', onTouchMove, false); 
can.addEventListener('touchstart', onTouchStart, false); 
can.addEventListener('touchend', onMouseUp, false); 
// Tablet 
function onTouchMove(event){ 
    if (mousePressed) { 
     event.preventDefault(); 
     mouseX = (event.targetTouches[0].pageX) - can.offsetLeft; 
     mouseY = (event.targetTouches[0].pageY) - can.offsetTop; 
     ctx.lineTo(mouseX, mouseY); 
     ctx.stroke(); 
    } 
} 

function onTouchStart(event){ 
    mousePressed = true; 
    mouseX = (event.targetTouches[0].pageX) - can.offsetLeft; 
    mouseY = (event.targetTouches[0].pageY) - can.offsetTop; 
    ctx.beginPath(); 
    ctx.moveTo(mouesX, mouseY); 
} 

function onMouseUp(event){ 
    mousePressed = false; 
} 
// Desktop 
can.addEventListener('mousemove', onMouseMove, false); 
can.addEventListener('mousedown', onMouseDown, false); 
can.addEventListener('mouseup', onMouseUp, false); 

function onMouseMove(event) { 
    if (mousePressed) { 
     event.preventDefault(); 
     mouseX = event.clientX - can.offsetLeft; 
     mouseY = event.clientY - can.offsetTop; 
     ctx.lineTo(mouseX, mouseY); 
     ctx.stroke(); 
    } 
} 

function onMouseDown(event) { 
    mousePressed = true; 
    mouseX = event.clientX - can.offsetLeft; 
    mouseY = event.clientY - can.offsetTop; 
    ctx.beginPath(); 
    ctx.moveTo(mouseX, mouseY); 
} 

$('#clearsig')[0].addEventListener('click', clearSignature, false); 

function clearSignature() { 
    ctx.clearRect(0, 0, can.width, can.height); 
}

的HTML：

<canvas id="signature" width="800" height="350" style="border:1px solid #000;"></canvas>

在桌面上繪製的一切用鼠標罰款，我沒有問題。然而，在我的星系標籤3上當我在畫布上畫線時，線條畫出了一個曲折形狀。不知道爲什麼會發生這種情況或如何解決這個問題。

來源

2013-10-23 kqlambert

http://jsfiddle.net/KUaEF/在平板電腦上測試它，如果它工作正常，頁面上的其他內容會干擾畫布。小提琴在我的iOS設備上完美運行 – orhanhenrik

您是否在使用canvas元素（除了內聯）使用了一些CSS樣式？ – K3N

只是樣式元素中的邊框@ Ken-AbdiasSoftware – kqlambert

不知道你是否找到了答案，但我有一個類似的問題，並最終設法解決它。在星系標籤2和3的畫布上繪製線條，銀河註釋10.1（2012年版，2014年版沒有問題）可以創建鋸齒狀線條。這同樣適用於Izzey的jsfiddle。如果你的問題與我的問題是一樣的，那麼該設備正在挑選mousemove和touchmove ..它基本上繪製了兩行鼠標移動值的錯誤。看看這個http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-according-to-device/ 它爲我工作。我真的希望這有助於.. :)

來源

2014-07-10 14:49:34 explora

當給出鏈接答案時 - 請始終記住鏈接可能在某個時間點停止工作。因此，儘量確保您的答案包含來自鏈接的所有信息，即使彙總。指導OP進一步閱讀是可以的 - 但即使沒有鏈接，答案也應該保持有效 - 而你的看起來並不像。 – Korem

HTML5畫布繪製成爲在平板

回答

相關問題