Question

我正在尝试制作一个用户可以在this tutorial之后绘制的画布。

代码如下：

<canvas id="playSpace" width="500" height="300"></canvas>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
context=document.getElementById('playSpace').getContext("2d");

$('#playSpace').mousedown(function(e){
    var mouseX=e.pageX - this.offsetLeft;
    var mouseY=e.pageY - this.offsetTop;

    paint=true;
    addClick(e.pageX - this.offsetLeft,e.pageY-this.offsetTop);
    redraw();
});

$('#playSpace').mousemove(function(e){
    if(paint){
        addClick(e.pageX - this.offsetLeft,e.pageY - this.offsetTop, true);
        redraw();
    }
});

$('#playSpace').mouseup(function(e){
    paint=false;
});

$('#playSpace').mouseleave(function(e){
    paint=false;
});

var clickX=new Array();
var clickY=new Array();
var clickDrag=new Array();
var paint;

function addClick(x,y,dragging)
{
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
}

function redraw(){
    context.clearRect(0,0,context.canvas.width,context.canvas.height);

    context.strokeStyle="#df4b26";
    context.lineJoin="round";
    context.lineWidth=5;

    for(var i=0;i<clickX.length;i++){
        context.beginPath();
        if(clickDrag[i] && i){
            context.moveTo(clickX[i-1],clickY[i-1]);
        }
        else{
            context.moveTo(clickX[i]-1,clickY[i]);
        }
        context.lineTo(clickX[i],clickY[i]);
        context.closePath();
        context.stroke();
    }
}

</script>

我在this JSFiddle进行了测试，它在桌面上的Chrome上工作正常：点击并拖动绘制红线。

但是当我在我的Android手机上使用Android 4.2.2打开Chrome中的相同JSFiddle时，没有任何反应：我将手指拖过画布但没有出现任何行。

我是否需要执行不同的操作才能在Android中启用拖动功能？

Answer 1

移动设备不一定有鼠标移动事件，它有触摸事件。

看一下这个答案：

How to get continuous mousemove event when using android mobile browser?

Answer 2

尝试将此用于Android

  e.touches[0].pageX 
  e.touches[0].pageY

HTML5 canvas在桌面浏览器上运行良好，但在Android上运行不正常

2 个答案: