Как передвигать точки на canvas?

212

03 сентября 2018, 21:10

На канвасе рисуется линия по точкам, как передвигать уже нарисованные точки?

Работает по сенсорному нажатию.

function resize_canvas(){
        canvas = document.getElementById("mycanvas");
        imag = document.getElementById("sr200cam");
        if (canvas.width  < imag.width)
        {
            canvas.width  = imag.width;
        }
        if (canvas.height < imag.height)
        {
            canvas.height = imag.height;
        }
    }
    function inits() {
        var touchzone = document.getElementById("mycanvas");
        touchzone.addEventListener("touchstart", draws, false);
    }
    function draws() {
        var canvas = document.getElementById('mycanvas');
        ct = canvas.getContext("2d");
        if(canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillRect (event.touches[0].pageX, event.touches[0].pageY, 5, 5);
            if (i = 0) {
                ct.moveTo(event.touches[0].pageX,event.touches[0].pageY);
            }
                ct.lineTo(event.touches[0].pageX,event.touches[0].pageY);
            ct.strokeStyle = "#ff0000";
            ct.stroke();
            str = str + event.touches[0].pageX.toFixed(0) + " " + event.touches[0].pageY.toFixed(0) + ";";
            i++;
        }
    }

.Dock {
min-width: 100%;
min-height: 100%;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
overflow: hidden;
color: #808080;
justify-content: space-between;
font-family: arial, helvetica;
}

<body onload="inits()"> 
  <img src="#"/> 
  <div class="Dock"> 
		<canvas id="mycanvas"></canvas> 
</div> 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Анимация по очереди, а не одновременно

При добавлении двух блоков с анимацией они анимируются одновременно, а надо, чтобы сначала раскрылся один, затем по завершении второй

248

jQuery

Автоматический скролл к низу страницы

Нужно чтобы скролл прокручивался к самому низу страницы вместе с анимацией

243

Полиморфные связи в Entity Framework

Есть, скажем, таблица Attachments со столбцами: id | ownerId | ownerType, которые, соответственно: первичный ключ, внешний ключ и таблица, к которой относится...

320

Как “присвоить” функцию в переменную?

Здравствуйте как "присвоить" функцию в переменную:

219