Tôi đang sử dụng canvas html5 + một số javascript (onmousedown/move/up) để tạo bản vẽ đơn giản trên trang web.javascript + html5 canvas: bản vẽ thay vì kéo/cuộn trên thiết bị di động?
Hoạt động OK trong Opera, Firefox, Chrome, v.v. (thử trên máy tính để bàn). Nhưng nếu tôi truy cập trang này bằng iPhone, khi cố gắng vẽ trên canvas, thay vào đó nó sẽ kéo hoặc cuộn trang.
Điều này là tốt cho nội dung trang khác, bằng cách trượt trang lên xuống, bạn có thể điều hướng thông qua trang trong trình duyệt dành cho thiết bị di động như bình thường. Nhưng có cách nào để vô hiệu hóa hành vi này trên canvas hay không, để khách truy cập trên thiết bị di động thực sự có thể vẽ thứ gì đó trên đó không?
Đối với các bạn tham khảo, đây là một ví dụ minimalisic:
<html><head><script type='text/javascript'>
function init()
{
var canvas = document.getElementById('MyCanvas');
var ctx = canvas.getContext('2d');
var x = null;
var y;
canvas.onmousedown = function(e)
{
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
canvas.onmouseup = function(e)
{
x = null;
}
canvas.onmousemove = function(e)
{
if (x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetLeft;
ctx.lineTo(x,y);
ctx.stroke();
}
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>
Có một số phong cách đặc biệt hay sự kiện tôi phải thêm vào vải, để tránh kéo/cuộn trang khi trượt trong vải?
Ah, có ý nghĩa. Không bao giờ nhận thấy những điều này trước đây. Cảm ơn! –
Trên Android, tính năng này không hoạt động nhưng bạn có thể sử dụng 'e.preventDefault();' theo thông số kỹ thuật http://www.w3.org/TR/touch-events/#the-touchstart—— ---biến cố – lapo