为虽然屏幕（TouchEvent）进行擦除工作答案

【问题标题】：Make erase work for thoughscreen (TouchEvent)为虽然屏幕（TouchEvent）进行擦除工作
【发布时间】：2021-04-09 12:02:01
【问题描述】：

我制作了一个简单的游戏，您必须擦除彩色图层才能显示图像。但它只适用于我的桌面，不适用于有屏幕的设备（iphone 或 ipad）。我知道我必须将 MouseEvent 替换为 TouchEvent，但我不知道如何，因为我是编码的初学者。我希望有人可以帮助我！

#canvas {
    background-image: url("img/image.jpg");
    background-repeat: no-repeat;
    width: 800px;
    height: 800px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Ellen Langendam</title>
  <link href="style.css" rel="stylesheet">

</head>

<body>

<div id="canvas"></div>

<script>

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element

    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 10, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 40; // or whatever
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 800, 800, '#99ff99');

})();

</script>

</body>

</html>

【问题讨论】：

使用touchstart、touchdown和touchmove。你的代码不需要太多的调整。
@ChloeAnderson 感谢您的回复！你能帮我写代码吗？

标签： javascript html mouseevent touch-event erase

【解决方案1】：

使用ontouchmove 注册触摸动作，然后通过触摸点event.touches 进行交互，并使用每个项目的属性来绘制你的圆圈，就像在onmousemove 中一样。

我还建议使用let 或const 类型的变量而不是var，因为var 可能会导致不幸的问题，请参阅：What's the difference between using "let" and "var"?

function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
}

function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
        this.fillStyle = fillColor;
        this.beginPath();
        this.moveTo(x, y);
        this.arc(x, y, radius, 0, Math.PI * 10, false);
        this.fill();
    };
    ctx.clearTo = function(fillColor) {
        ctx.fillStyle = fillColor;
        ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "#ddd");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
        if (!canvas.isDrawing) {
           return;
        }
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var radius = 40; // or whatever
        var fillColor = '#ff0000';
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
        canvas.isDrawing = true;
    };
    canvas.node.onmouseup = function(e) {
        canvas.isDrawing = false;
    };
    
    canvas.node.ontouchmove = function(event) {
      for(let index = 0; index < event.touches.length; index++) {
        const touch = event.touches[index];
        
        const x = touch.pageX - this.offsetLeft;
        const y = touch.pageY - this.offsetTop;
        
        const radius = 40; // or whatever
        const fillColor = '#ff0000';
        
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, fillColor);
      }
    };
}

var container = document.getElementById('canvas');
init(container, 800, 800, '#99ff99');

#canvas {
    background-image: url("img/image.jpg");
    background-repeat: no-repeat;
    width: 800px;
    height: 800px;
}

&lt;div id="canvas"&gt;&lt;/div&gt;

【讨论】：

感谢@ChloeAnderson！您是否也可以尝试帮助我：stackoverflow.com/questions/67019005/…