Как я могу заставить рисование на холсте работать на мобильных устройствах

Рейтинг: 0Ответов: 1Опубликовано: 26.02.2023

Помогите, полная версия работает, а мобильная нет!

<canvas id="canvas" width="350" height="200"></canvas>

window.addEventListener("load", function onWindowLoad(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var points = [];
    
    
    var img = new Image();
    img.src = '/files/white.png';   
    img.addEventListener('load', function(){
        ctx.drawImage(img, 0, 0);
 
        var mouseX = 0;
        var mouseY = 0;
        
        // Стиль линии
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2; 
        var isDrawing = false;
 
        // Обработчики рисования мышкой
        canvas.addEventListener('mousedown', function(event) {
            setMouseCoordinates(event);
            isDrawing = true;
            ctx.beginPath();
            ctx.moveTo(mouseX, mouseY);
                
            points.push({
                x: mouseX,
                y: mouseY,
                mode: "begin"
            });
        });
 
        canvas.addEventListener('mousemove', function(event) {
            setMouseCoordinates(event);
            if(isDrawing){
                ctx.lineTo(mouseX, mouseY);
                ctx.stroke();
                points.push({
                    x: mouseX,
                    y: mouseY,
                    mode: "draw"
                });                 
            }
        });
 
        canvas.addEventListener('mouseup', function(event) {
            setMouseCoordinates(event);
            isDrawing = false;
                
            points.push({
                x: mouseX,
                y: mouseY,
                mode: "end"
            });
        });
 
        function setMouseCoordinates(event) {
            mouseX = event.offsetX;
            mouseY = event.offsetY;
        }
    });
});
javascript html php canvas
Источник: Stack Overflow на русском

Ответы

▲ 0

Для того чтобы ваш код заработал на мобильных устройствах, необходимо добавить обработку событий touchstart, touchmove и touchend. Мобильные устройства с сенсорными экранами, а не мышкой, поэтому обработчики событий мыши не будут работать.

window.addEventListener("load", function onWindowLoad() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var points = [];

  var img = new Image();
  img.src = "/files/white.png";
  img.addEventListener("load", function () {
    ctx.drawImage(img, 0, 0);

    var isDrawing = false;
    var lastX = 0;
    var lastY = 0;

// нацепим методы для рисования под события мобилок и декстопов
        canvas.addEventListener("mousedown", start);
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mouseup", stop);
    
        canvas.addEventListener("touchstart", start);
        canvas.addEventListener("touchmove", draw);
        canvas.addEventListener("touchend", stop);

и так далее... расписывайте методы