Добавляем сенсорный ввод и позволяем изображению исчезать через некоторое время

Я пишу HTML-страницу, чтобы провести нейропсихологический тест. Мне нужно, чтобы изображение b.png исчезло через несколько секунд, чтобы пациент мог его нарисовать. Мне также нужно интегрировать сенсорный ввод, чтобы тест был доступен пользователям планшетов.

<html>
    <script type = "text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }
    
    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;
    
    }
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }
    
    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    </script>
    <body onload = "init()">
        <canvas id = "can" width = "800" height = "800" style = "position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
                <div style = "position:absolute;top:3%;left:45%;">Gomma</div>
                <div style = "position:absolute;top:3%;left:50%;">Penna</div>
        <div style = "position:absolute;top:5%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id = "white" onclick = "color(this)"></div>
        <div style = "position:absolute;top:5%;left:50%;width:17px;height:17px;background:black;" id = "black" onclick = "color(this)"></div>
        <img id = "canvasimg" style = "position:absolute;top:10%;left:52%;" style = "display:none;">
        <input type = "button" value = "salva" id = "btn" size = "30" onclick = "save()" style = "position:absolute;top:2%;left:15%;">
        <p>Clicca su "Inizia" per iniziare il test.</p>

<button onclick = "setTimeout(salvatest, 3000); immaginetest()">Inizia</button>

<script>
function salvatest() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
}
</script>
    <script>
        function immaginetest() {
        var src = "b.png";
        show_image("b.png", 512, 800, "absolute",300,100, 1, "<alt>");
    }


    function show_image(src, width, height, position,left,top, zIndex, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height
        img.style.position = position;
        img.style.left = left+'px';
        img.style.top = top+'px';
        img.style.zIndex = zIndex;
        img.alt = alt;

        document.body.appendChild(img);
        }
    </script>
    </div>
    </body>
    </html>

Я понятия не имею, как это сделать, я не разработчик, я врач, поэтому мои знания кодирования в основном анекдотичны, это пока мой код.

javascript html

03.11.2018 19:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Взгляните на Нажмите здесь!

setTimeout(function() {
  //do your job here
}, 1000)

03.11.2018 20:14

Другие вопросы по теме

Удалите все <p> только с одним пробелом внутри PHP

Использование шрифта opensans - текст не центрируется по вертикали

Как заставить секунды работать на время типа ввода

RouterLink не работает должным образом динамически в angular 6

Шрифт не отображается должным образом, когда веб-сайт загружен на живой хостинг

Вызов метода POST из всплывающего окна

Почему innerHTML не работает с элементами Html в тексте ответа через AJAX?

Структура: Где разместить компонент панели навигации (Vue / React)

Как прокрутить вверх и загрузить iframe

Объект BeautifulSoup не извлекает тег html с веб-страницы с помощью html.parser

Добавляем сенсорный ввод и позволяем изображению исчезать через некоторое время

Ответы 1

Другие вопросы по теме

Похожие вопросы