Блог

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

 var canvas;
var button;

function windowResized() {
    console.log('resized');
    resizeCanvas(windowWidth, windowHeight);
}

function setup () {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0,0);
    canvas.style('z-index', '-1')
    background(175);
    // button = createButton("Start Your Walk");
}

function draw () {
    strokeWeight(4);
    console.log('button')
    line(pmouseX, pmouseY, mouseX, mouseY)
}
 

Вы можете сохранить значения положения мыши в массиве, а затем нарисовать точки массива по порядку. Когда массив будет обновлен, если он заполнен, вам придется стереть последнюю точку массива, переместить все точки на одну позицию назад и добавить новую точку. Ниже приведен пример кода. Я рекомендую вам ознакомиться с этой страницей для получения документации, а также со ссылкой на p5.

 var mousePositions = [];

function setup() {
  createCanvas(400, 400);
}


function draw() {
  background(220);
  v = createVector(mouseX, mouseY);
  mousePositions.push(v);
  noFill();
  beginShape();
  for(var i = 0; i < mousePositions.length; i  ){
    vertex(mousePositions[i].x, mousePositions[i].y);
  }
  endShape();
  if(mousePositions.length > 25){
    mousePositions.shift();
  }
}