0

Задача: нужно сделать так чтобы курсор оставлял после себя след в виде красного свечение как на фото, и чтобы в дальнейшем он постепенно исчезал введите сюда описание изображения

0

1 ответ 1

8
  1. В атрибуте style тега body указатель скрывается *UPD.
  2. Благодаря использованию экспериментальной технологии CanvasRenderingContext2D.filter (проверяйте совместимость) можно добиться желаемого результата, уменьшая радиус изображаемого круга.
  3. Удаление и изменение радиусов кругов осуществляется путём сохранения их координат.
  4. Длинный список вставлен для примера работы на странице, не умещающейся на высоте окна, чёрный цвет текста позволяет (по моему мнению, более точно) определить, где именно происходит отрисовка кругов (под текстом).
  5. Управление эффектом осуществляется изменением переменных radius (радиус круга), period (время, за которое круг исчезает), color (цвет круга), blur (радиус размытия) и cursorRadius (радиус круга указателя).

var canvas = document.getElementById("blur_cursor");
var context = canvas.getContext("2d");
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
var points = [], cursor = [-100, -100];
var t = 0;

var radius = 50;
var period = 1000;
var color = "#f00";
var blur = 50;
var cursorRadius = 10;

canvas.style.width = canvas.width = width;
canvas.style.height = canvas.height = height;
context.fillStyle = color;
var filter = context.filter = "blur(" + blur + "px)";
var dr = radius / period;

function draw() {
  context.clearRect(0, 0, width, height);
  let i = 0;
  let deleted = 0;
  let dt = -t + (t = window.performance.now());
  context.beginPath();
  while (i++ < points.length-1) {
    let p = points[i];
    let r = radius - (p[2] += dt) * dr;
    context.moveTo(p[0], p[1]);
    if (p[2] <= period) context.arc(p[0], p[1], r, 0, 2*Math.PI, true);
    else deleted = i;
  }
  context.fill();
  points.splice(0, deleted);
  context.beginPath();
  context.arc(cursor[0], cursor[1], cursorRadius, 0, 2*Math.PI, true);
  context.filter = "none";
  context.fill();
  context.filter = filter;
  window.requestAnimationFrame(draw);
}

window.onmousemove = function(event) {
  let x = event.pageX;
  let y = event.pageY;
  points.push([x, y, 0]);
  cursor = [x, y];
}

t = window.performance.now();
window.requestAnimationFrame(draw);
<body style="background: #000; cursor: none;">
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  <canvas id="blur_cursor" style="position: absolute; left: 0; top: 0; z-index: -1;">Не поддерживается</canvas>
</body>

*UPD

В текущем варианте курсор спрятан, и на его месте отображается круг (который будет находиться под элементом). Если нужен указатель, отображающийся поверх текста, то следует использовать картинку, то есть файл разметки должен стать таким (URL картинки можно изменить):

<body style="background: #000; cursor: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Red_Circle%28small%29.svg/44px-Red_Circle%28small%29.svg.png) 23 23, auto;">

А эти строки следует исключить:

context.beginPath();
context.arc(cursor[0], cursor[1], cursorRadius, 0, 2*Math.PI, true);
context.filter = "none";
context.fill();
context.filter = filter;

Пример курсора-картинки:

var canvas = document.getElementById("blur_cursor");
var context = canvas.getContext("2d");
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
var points = [];
var t = 0;

var radius = 50;
var period = 1000;
var color = "#f00";
var blur = 50;

canvas.style.width = canvas.width = width;
canvas.style.height = canvas.height = height;
context.fillStyle = color;
var filter = context.filter = "blur(" + blur + "px)";
var dr = radius / period;

function draw() {
  context.clearRect(0, 0, width, height);
  let i = 0;
  let deleted = 0;
  let dt = -t + (t = window.performance.now());
  context.beginPath();
  while (i++ < points.length-1) {
    let p = points[i];
    let r = radius - (p[2] += dt) * dr;
    context.moveTo(p[0], p[1]);
    if (p[2] <= period) context.arc(p[0], p[1], r, 0, 2*Math.PI, true);
    else deleted = i;
  }
  context.fill();
  points.splice(0, deleted);
  window.requestAnimationFrame(draw);
}

window.onmousemove = function(event) {
  points.push([event.pageX, event.pageY, 0]);
}

t = window.performance.now();
window.requestAnimationFrame(draw);
<body style="background: #000; cursor: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Red_Circle%28small%29.svg/44px-Red_Circle%28small%29.svg.png) 23 23, auto;">
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  <canvas id="blur_cursor" style="position: absolute; left: 0; top: 0; z-index: -1;">Не поддерживается</canvas>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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