在浏览器和电子平台上，绘画是可行的，但在安卓平台上尝试在画布上绘画却不行，这是为什么

Question

正如我在问题中所问的，在cordova应用程序中，在浏览器和电子平台中，绘画是可行的，但在android平台中，尝试在画布上绘画却不行。单击画布，而不是绘图，我拖动屏幕。

代码如下。

这是html:

<div class="centerPainting">
<h1>Painting: hold down the mouse button to draw in the rectangle below.</h1><div id="container"><canvas id="imageView" width="300" height="300">
<p>Unfortunately, your platform does not support the canvas element.</p>
</canvas>
</div>
</div>

这是CSS：

#container { 
position: relative; 
}
#imageView { 
border: 1px solid #000; 
}
.centerPainting {
margin: auto;
width: 300px;
padding: 10px;
/* The CSS below stops users from being able to select text. */
-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

这是Javascript：

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {

var canvas, context, tool;  

init();
}
function init () {
// Find the canvas element.
canvas = document.getElementById('imageView');
if (!canvas) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvas.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Error: failed to getContext!');
return;
}
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
}
// This painting tool works like a drawing pencil which tracks the mouse 
// movements.
function tool_pencil () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse 
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}

我该怎么解决？

更新：Morrison Chang发表评论后，我将代码更改为：

// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown touchstart', ev_canvas, false);
canvas.addEventListener('mousemove touchmove', ev_canvas, false);
canvas.addEventListener('mouseup touchend',   ev_canvas, false);

但它仍然不起作用。

更新2：我添加了多个事件侦听器，就像这个开发人员所做的那样：

将多个事件侦听器添加到一个元素

所以，我添加了这个代码：

// Attach the touchstart, touchmove and touchend event listeners.
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
canvas.addEventListener('touchend',   ev_canvas, false);

这个代码：

this.touchstart = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
}; 
this.touchmove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.touchend = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};

但是，它仍然不起作用。

Answer 1

需要检查的几件事：

• 尝试在ev_canvas((方法中添加警报，看看代码是否在触摸事件中到达那里。

• 您提到屏幕正在被拖动。如果您还没有这样做，您可能希望将视口设置为不在index.html中移动：

  <meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, viewport-fit=cover">