Question

我试图创建一个画布对象，可以像mspaint一样用来绘制东西。我希望能够使用鼠标和笔（在我的情况下，表面笔在表面4上）。

所有4个浏览器都可以使用鼠标绘图。问题在于笔：它与IE11，Egde，Firefox一起正常工作，但是有一个浏览器可以抵抗并且它是Chrome ...

事实上，使用Chrome（v63），笔可以绘制，但只有当笔不接触屏幕，但是非常接近它。一旦我用笔触摸屏幕，它就不再画了......

所以我错过了什么？为什么我有这种差异，谁有正确的实施？如何解决这个问题是跨浏览器？请注意，我也尝试使用 PointerEvent （https://developer.mozilla.org/en-US/docs/Web/Events/pointerdown），但它也没有工作......

代码

在此处查看并试用代码：https://codepen.io/miam84/pen/aNMryw

在这里，使用了一些侦听器的代码：

canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);

function remove_event_listeners() {
      canvas.removeEventListener('mousemove', on_mousemove, false);
      canvas.removeEventListener('mouseup', on_mouseup, false);
      canvas.removeEventListener('touchmove', on_mousemove, false);
      canvas.removeEventListener('touchend', on_mouseup, false);
      document.body.removeEventListener('mouseup', on_mouseup, false);
      document.body.removeEventListener('touchend', on_mouseup, false);
};

//Event when the mouse is clicked
function on_mousedown(e) {
      if (!canvas.isLocked) {
        e.preventDefault();
        e.stopPropagation();

        canvas.hasDrawn = false;
        //we activate the mouse and touch events
        canvas.addEventListener('mouseup', on_mouseup, false);
        canvas.addEventListener('mousemove', on_mousemove, false);
        canvas.addEventListener('touchend', on_mouseup, false);
        canvas.addEventListener('touchmove', on_mousemove, false);
        document.body.addEventListener('mouseup', on_mouseup, false);
        document.body.addEventListener('touchend', on_mouseup, false);

        var xy = canvas.getCursorCoords(e);
        canvas.ctx.beginPath();
        canvas.pixels.push('moveStart');
        canvas.ctx.moveTo(xy.x, xy.y);
        canvas.pixels.push(xy.x, xy.y);
        canvas.xyLast = xy;
      }
};

带笔的Chrome canvas touchstart无法正常使用

0 个答案: