如何防止 Canvas 在移动设备上表现得像图像一样

How to prevent Canvas to act like an Image on Mobile?

本文关键字：图像 一样 Canvas 何防止 移动      更新时间：2023-09-26

我有一个交互式画布，您可以在其中单击一些按钮。但是当我在移动设备上测试它并尝试单击按钮时，它不会立即做出反应。我必须按下并等待行动。

在这里测试：http://choix.me/labor/canvas/car.html

这里是 upBtn 的 JavaScript 代码：

    this.upBtn.addEventListener("mousedown", upClick.bind(this));
    this.upBtn.addEventListener("click", upRelease.bind(this));
    function upClick()
    {
                up = true;
                speed = 10;
                forward = 1;
    }
    function upRelease()
    {
                up = false;
                speed = 10;
                forward = 0;
    }

您使用的是鼠标按下和单击事件，这两个事件都不是移动浏览器自然支持的事件。 它们确实可以工作，但与在桌面上的工作方式不同。 绑定到触摸事件，特别是触摸开始和触摸结束事件

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

   this.upBtn.addEventListener("touchstart", upClick.bind(this));
    this.upBtn.addEventListener("touchend", upRelease.bind(this));
    function upClick()
    {
                up = true;
                speed = 10;
                forward = 1;
    }
    function upRelease()
    {
                up = false;
                speed = 10;
                forward = 0;
    }

未经测试的代码，但要点就在那里

它与CreateJS有关：

此行修复了它：

    createjs.Touch.enable(stage);

从：未使用 Flash CC 注册 HTML5 画布创作的触摸事件

相关文章：