Нарисуйте несколько путей на холсте HTML

Привет. У меня проблема с моим HTML-холстом. Он отлично работает, когда я рисую на холсте, это всего лишь один непрерывный длинный штрих от одной точки касания. возможно ли сделать так, чтобы вы рисовали, затем останавливались, затем снова рисовали и так далее. т.е. просто рисовать несколько раз на холсте, а не один непрерывный штрих? например, рисовать лицо? Смотрите ниже мой код. Цените любую помощь.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>


<style>
canvas { border: 5px solid blue }

</style>

</head>
<body>
<canvas id = "c" width = "500" height = "300"></canvas>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


<script>
function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}

function getPattern() {
  return ctx.createPattern(img, 'repeat');
}


var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 50;
ctx.lineJoin = ctx.lineCap = 'round';

var img = new Image;
img.onload = function() {
  ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";

var isDrawing, points = [];




var getXY = function(e) {
  var source = e.touches ? e.touches[0] : e;

  return {
    x: source.clientX,
    y: source.clientY
  };
};

var startDrawing = function(e) {
  isDrawing = true;
  points.push(getXY(e));
  event.preventDefault();

};


var keepDrawing = function(e) {
  if (!isDrawing) return;

  points.push(getXY(e));
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  var p1 = points[0];
  var p2 = points[1];

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i + 1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
  event.preventDefault();
};


var stopDrawing = function() {
  isDrawing = false;
  points = [];
};

el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);

el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);

el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);

function clearCanvas(canvas,ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }



</script>


<form id  = "search">
<input type = "text" name = "message" id = "user_input">
<input type = "submit" value = "Clear Sketchpad" id = "clearbutton" 
 onclick = "clearCanvas(canvas,ctx);">
</form>



<p><span id='display'></span></p>

</body>
</html>

Звоните ctx.beginPath(). stackoverflow.com/questions/22432036/…

— 18.03.2019 21:31

Возможный дубликат Должен ли я иметь content.beginPath() и content.closePath()?

— 18.03.2019 21:35

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

— 18.03.2019 21:36

Только что попытался удалить ctx.beginPath() из моего var keepDrawing, и это сработало как шарм, именно то, что я ищу. Спасибо чувак

— 18.03.2019 21:47

Подождите, удалить? Теперь я в замешательстве. Ну, что угодно.

— 18.03.2019 21:54

Хорошо, что var keepDrawing продолжал штрих, удаление сделало то же самое, что и добавление его в другую переменную, не уверен, но все равно это сработало, так что...

— 18.03.2019 21:58

javascript html css canvas html5-canvas

18.03.2019 21:28

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

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

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

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

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

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

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

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

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

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

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

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

865

Ответы 1

Вы очищаете холст в функции keepDrawing. Попробуйте удалить строку, в которой говорится:

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

в этой функции и повторите попытку. Вам нужно только очистить холст, когда пользователь нажимает кнопку.

18.03.2019 21:34

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

Приоритет каскада CSS не отображается правильно с Ruby on Rails

Можно ли внести изменения на одну веб-страницу с другой веб-страницы с помощью Javascript?

Изменить текст в TH с помощью Javascript

Мой обновленный слайд данных с использованием javascript не работает

Кнопка не выполняет обратную передачу, открытую PopupCenter

Как отобразить результаты запроса из базы данных в HTML с помощью node.js

Как получить положение div или изображения в div (верхнее и левое положение) и использовать эти значения в CSS?

Onclick конвертирует div в поля ввода и отправляет обновленное значение через ajax

Хотите создать форму HTML с полем редактирования, связанным со списком

Параметр Select выбирается много раз в событии jquery, если он отключен

Нарисуйте несколько путей на холсте HTML

Ответы 1

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

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