Javascript 如何使用触摸事件在画布内移动obj？

大家好，我只是想了解它是如何工作的 我有一个基本的画布基础，只是在javascript中，我想使用触摸事件移动它

我对此不确定，但我可以使用拖动事件吗

我需要使用循环函数吗

我怎样才能触发那个蓝色立方体

我知道有很多javascript引擎，事实上我正在使用phaser，但我想了解一下这一点

多谢各位

var画布、cx、宽度、高度；
变量多维数据集={
x:80，
y:100，
更新：函数（）{
},
绘图：函数（ctx）{
ctx.save（）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（100410,50,50）；
ctx.restore（）；
}
};
功能按下（e）{
e、 预防默认值（）；
var whichArt=e.target；
var-touch=e.touch[0]；
var moveOffsetX=whichArt.offsetLeft-touch.pageX；
var moveOffsetY=whichArt.offsetTop-touch.pageY；
whichArt.addEventListener（'touchmove'，函数（）{
变量位置X=touch.pageX+moveOffsetX；
var positionY=touch.pageY+moveOffsetY；
立方体x=位置x；
立方体y=位置y；
console.log（cube.x）；
}，假）；
}
函数main（）{
canvas=document.createElement（“canvas”）；
宽度=window.innerWidth；
高度=窗内高度；
如果（宽度>=500）{
宽度=320；
高度=480；
canvas.style.border=“1px solid#000”；
}
文档。添加了文本列表（“touchstart”，onpress）；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
run（）；
}
函数运行（）{
变量循环=函数（）{
更新（）；
render（）；
requestAnimationFrame（循环，画布）；
}
requestAnimationFrame（循环，画布）；
}
函数更新（）{
}
函数render（）{
立方图（ctx）；
}
main（）画布只是一个被动的绘图表面：您必须自己处理拖动操作。

下面是一个简短的示例：

Dragables对象必须实现
isPointInside
，并添加到Dragables对象列表中。

我使用了一个dragData对象，它存储了DragTables对象的列表，即当前拖动的对象，可能您需要存储拖动的开始/当前点，并处理拖动偏移，以便用户将对象保持在他/她开始拖动的点上


var画布、cx、宽度、高度；
var canvasRect；
变量cube1，cube2；
var dragData={
可拖动项：[]，
开始：{x:0，y:0
},
当前：{x:0，y:0
},
目标：空
};
函数立方体（x、y、w、h、颜色）{
这个.x=x；这个.y=y；这个.w=w；这个.h=h；
这个颜色=颜色；
}
Cube.prototype={
更新：函数（）{
},
绘图：函数（ctx）{
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.w，this.h）；
},
isPointInside:函数（x，y）{
返回（x>=this.x）&（xthis.y）&（y=500）{
宽度=320；
高度=480；
canvas.style.border=“1px solid#000”；
}
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
canvasRect=canvas.getBoundingClientRect（）；
canvas.addEventListener（“touchstart”，onStart）；
canvas.addEventListener（'touchmove'，onMove）；
canvas.addEventListener（“触摸屏”，桌面）；
canvas.addEventListener（“mousedown”，onStart）；
canvas.addEventListener（'mousemove'，onMove）；
canvas.addEventListener（“鼠标”，顶部）；
cube1=新立方体（100,80,30,30，'蓝色'）；
cube2=新立方体（150、160、20、20，‘红色’）；
dragData.draggables.push（cube1，cube2）；
run（）；
}
函数运行（）{
变量循环=函数（）{
请求动画帧（循环）；
更新（）；
render（）；
}
loop（）；
}
函数更新（）{
}
函数render（）{
ctx.clearRect（0，0，宽度，高度）；
立方1.牵引（ctx）；
立方2.牵引（ctx）；
}
main（）；
在JS中没有拖动事件。请看-->以下是哪些浏览器支持此操作的信息。此外，这在画布中对您没有帮助，因为您将拖动整个画布元素。
var canvas, cx, width, height;
var canvasRect;

var cube1, cube2;

var dragData = {
    draggables: [],
    start: {        x: 0,        y: 0
    },
    current: {      x: 0,        y: 0
    },
    target: null
};

function Cube(x,y,w,h, color) {
  this.x=x; this.y=y; this.w=w; this.h = h;
  this.color = color;
}

Cube.prototype = {
    update: function () {

    },
    draw: function (ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    },
    isPointInside: function (x, y) {
        return (x >= this.x) && (x < this.x + this.w) && (y > this.y) && (y < this.y + this.h);
    }
};

var pointerCoords = {
    x: 0,
    y: 0,
    update: function (e) {
        var coords = e.touches ? e.touches[0] : e;
        this.x = coords.pageX - canvasRect.left;
        this.y = coords.pageY - canvasRect.top;
    }
};


function onStart(e) {
    e.preventDefault();
    pointerCoords.update(e);
    // look if we start the touch within a draggable object
    var target = null;
    for (var i = 0; i < dragData.draggables.length; i++) {
        var draggable = dragData.draggables[i];
        if (draggable.isPointInside(pointerCoords.x, pointerCoords.y)) {
            target = draggable;
            break;
        }
    }
    dragData.target = target;
}

function onMove(e) {
    pointerCoords.update(e);
    var target = dragData.target;
    if (!target) return;
    target.x = pointerCoords.x;
    target.y = pointerCoords.y;
}

function onStop(e) {
    pointerCoords.update(e);
    e.preventDefault();
    if (!dragData.target) return;
    onMove(e);
    dragData.target = null;
}

function main() {
    canvas = document.createElement("canvas");

    width = window.innerWidth;
    height = window.innerHeight;

    if (width >= 500) {
        width = 320;
        height = 480;
        canvas.style.border = "1px solid #000";
    }

    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    canvasRect = canvas.getBoundingClientRect();
    canvas.addEventListener("touchstart", onStart);
    canvas.addEventListener('touchmove', onMove);
    canvas.addEventListener("touchstop", onStop);
    canvas.addEventListener("mousedown", onStart);
    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener("mouseup", onStop);

    cube1 = new Cube(100, 80, 30, 30, 'blue');
    cube2 = new Cube(150, 160, 20, 20, 'red');
    dragData.draggables.push(cube1, cube2);
    run();
}


function run() {
    var loop = function () {
        requestAnimationFrame(loop);
        update();
        render();
    }
    loop();
}

function update() {

}

function render() {
    ctx.clearRect(0, 0, width, height);
    cube1.draw(ctx);
    cube2.draw(ctx);
}

main();