3

Здравствуйте, у меня есть код на JavaScript, но он сделан только под десктопной версии браузеров, нужно еще поддержку смартфонов вот код:

window.onload = function() {

    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");


    // Подключаем требуемые для рисования события
    canvas.onmousedown = startDrawing;
    canvas.onmouseup = stopDrawing;
    canvas.onmouseout = stopDrawing;
    canvas.onmousemove = draw;

   //колір
   changeColor('rgb(0,86,166)', this);
}

Код которой менять не нужно, это для того чтоб понять суть предадущего

function startDrawing(e) {
    // Начинаем рисовать
    isDrawing = true;

    // Создаем новый путь (с текущим цветом и толщиной линии)
    context.beginPath();

    // Нажатием левой кнопки мыши помещаем "кисть" на холст
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}



/* рисование*/
function draw(e) {
    if (isDrawing == true)
    {
        // Определяем текущие координаты указателя мыши
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;

        // Рисуем линию до новой координаты
        context.lineTo(x, y);
        context.stroke();
    }
}


/* СТОП рисование*/
function stopDrawing() {
    isDrawing = false;
}

Я так понимаю что нужно менять вот тот кусок:

canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmousemove = draw;

1 ответ 1

1

Решение найдено!

Перед этим кодом:

canvas.onmousedown = startDrawing;
canvas.onmouseup  = stopDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmousemove = draw;

Нужно поставить (это подключение реакции на сенсор):

canvas.addEventListener("touchstart", startDrawing, false);
canvas.addEventListener("touchend", stopDrawing, false);
canvas.addEventListener("touchcancel", stopDrawing, false);
canvas.addEventListener("touchmove", draw, false);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.