How's the trail a red candle?


  • QA Engineer

    Target: We need the cadet to leave a red candle after himself as a photo, and then it will gradually disappear. введите сюда описание изображения



    1. Attribute style The body https://developer.mozilla.org/ru/docs/Web/CSS/cursor hiding. *UPD
    2. Through the use of experimental technology https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter (verify compatibility) the desired result can be achieved by reducing the radius of the circle.
    3. The radius of circles is removed and changed by maintaining their coordinates.
    4. The long list is included for example of work on a page that is not suitable at the height of the window, the black colour of the text allows (in my view, more accurately) to determine where the circles are drawing (under the text).
    5. Impact management is effected by changes in variables radius (radius of circle) period (the time for which the circle disappears) color (sighs) blur (mashing range) and cursorRadius (radius of indicator circle).

    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, 2Math.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

    In the current version, the cadet is hidden and a circle is displayed (to be located) Underneath element). If a sign is required from the top of the text, a picture should be used, i.e. the marking file should be such (URL the picture can be changed):

    <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;">

    These lines should be deleted:

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

    Example of courseor card:

    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>



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2