为什么我的小应用程序不适用于智能手机

Question

我有这段代码，旨在允许在android智能手机平板电脑上绘图。我使用触摸事件。对于桌面事件，它是有效的，对于桌面浏览器，它也是有效的。在代码中，我注释掉了桌面的代码，只留下了安卓智能手机和平板电脑的代码。有什么想法吗？

这是HTML:

<div id="canvas">Click to draw<br/></div>

这是JavaScript：

(function() {
// Creates a new canvas element and appends it as a child
// to the parent element, and returns the reference to
// the newly created canvas element

function createCanvas(parent, width, height) {
var canvas = {};
canvas.node = document.createElement('canvas');
canvas.context = canvas.node.getContext('2d');
canvas.node.width = width || 100;
canvas.node.height = height || 100;
parent.appendChild(canvas.node);
return canvas;
}
function init(container, width, height, fillColor) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// define a custom fillCircle method
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
ctx.clearTo = function(fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, width, height);
};
ctx.clearTo(fillColor || "#ddd");
// bind mouse events
/*canvas.node.onmousemove = function(e) {
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 5; // or whatever
var fillColor = '#ff0000';
ctx.fillCircle(x, y, radius, fillColor);
};
canvas.node.onmousedown = function(e) {
canvas.isDrawing = true;
};
canvas.node.onmouseup = function(e) {
canvas.isDrawing = false;
};
*/
// bind touch events
canvas.node.ontouchmove = function(e) {
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 5; // or whatever
var fillColor = '#ff0000';
ctx.fillCircle(x, y, radius, fillColor);
};
canvas.node.ontouchstart = function(e) {
canvas.isDrawing = true;
};
canvas.node.ontouchend = function(e) {
canvas.isDrawing = false;
};
}
var container = document.getElementById('canvas');
init(container, 200, 200, '#ddd');
})();

代码链接：https://codepen.io/sp2012/pen/gOmGZGV

Answer 1

这应该是因为您的x和y提取

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

查看此文档了解画布触摸事件

我认为您应该访问e.touches数组来提取pageX和pageY信息。

这里有一个链接，我在其中做了一些更改，使其适用于移动设备。但这只是一个破解：(。也通过这个有类似问题的链接。