在浏览器和电子平台上，绘画作品都可以，但在android平台上尝试在画布上绘画却不行，这是为什么呢？

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:我添加了多个事件侦听器，就像这个开发人员所做的那样：

adding multiple event listeners to one element

因此，我添加了以下代码：

    // 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">