Question

我正在努力实现此处使用的效果：Canva Sign Up page

值得庆幸的是，他们已经采取了一些措施来实现这一效果：Five visual effects

这是我迄今取得的成就：

var canvas, ctx,
  prevX = 0,
  currX = 0,
  prevY = 0,
  currY = 0;

function init() {
  canvas = document.getElementById('log');
  ctx = canvas.getContext("2d");
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight



  canvas.onmousemove = function(e) {

    currX = e.pageX;
    currY = e.pageY;
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.lineCap = "round";
    var d = distance(prevX, prevY, currX, currY);
    var w = 80 / d;
    ctx.lineWidth = w;
    ctx.stroke();
    prevX = currX;
    prevY = currY;
  }

}


function distance(x1, y1, x2, y2) {
  var a = x1 - x2
  var b = y1 - y2

  var c = Math.sqrt(a * a + b * b);
  return c;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<body onload="init()">
  <canvas id="log"></canvas>

但我无法：

使尺寸更改顺利
在一段时间后使踪迹淡出

我调查了其他一些淡出画布路径的问题，但是它们似乎都没有正常工作。路径不会完全淡出，或者在路径中添加阴影会在整个页面内创建阴影。

任何关于如何做到这一点的指针（至少是淡出部分）都会有所帮助。我不需要canva上的完整最终结果，只是我无法弄清楚的两件事。

谢谢

Answer 1

我希望这是您想要的：

#include <iostream>
#include <vector>
using namespace std;

void add(std::vector<int> &col) {
    col.push_back(1);
    col.push_back(2);
    col.push_back(13);
}

int main() {
    std::vector<int> col;

    add(col);

    cout << col.size() << endl;
    for(int i=0;i<col.size();i++)
        cout << col[i] << endl;

    return 0;
}

var image = document.querySelector('img');
var imageCanvas = document.createElement('canvas');
var imageCanvasContext = imageCanvas.getContext('2d');
var lineCanvas = document.createElement('canvas');
var lineCanvasContext = lineCanvas.getContext('2d');
var pointLifetime = 1000;
var points = [];

if (image.complete) {
  start();
} else {
  image.onload = start;
}

/**
 * Attaches event listeners and starts the effect.
 */
function start() {
  document.addEventListener('mousemove', onMouseMove);
  window.addEventListener('resize', resizeCanvases);
  document.body.appendChild(imageCanvas);
  resizeCanvases();
  tick();
}

/**
 * Records the user's cursor position.
 *
 * @param {!MouseEvent} event
 */
function onMouseMove(event) {
  points.push({
    time: Date.now(),
    x: event.clientX,
    y: event.clientY
  });
}

/**
 * Resizes both canvases to fill the window.
 */
function resizeCanvases() {
  imageCanvas.width = lineCanvas.width = window.innerWidth;
  imageCanvas.height = lineCanvas.height = window.innerHeight;
}

/**
 * The main loop, called at ~60hz.
 */
function tick() {
  // Remove old points
  points = points.filter(function(point) {
    var age = Date.now() - point.time;
    return age < pointLifetime;
  });

  drawLineCanvas();
  drawImageCanvas();
  requestAnimationFrame(tick);
}

/**
 * Draws a line using the recorded cursor positions.
 *
 * This line is used to mask the original image.
 */
function drawLineCanvas() {
  var minimumLineWidth = 25;
  var maximumLineWidth = 100;
  var lineWidthRange = maximumLineWidth - minimumLineWidth;
  var maximumSpeed = 50;

  lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
  lineCanvasContext.lineCap = 'round';
  lineCanvasContext.shadowBlur = 30;
  lineCanvasContext.shadowColor = '#000';
  
  for (var i = 1; i < points.length; i++) {
    var point = points[i];
    var previousPoint = points[i - 1];

    // Change line width based on speed
    var distance = getDistanceBetween(point, previousPoint);
    var speed = Math.max(0, Math.min(maximumSpeed, distance));
    var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed;
    lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange;

    // Fade points as they age
    var age = Date.now() - point.time;
    var opacity = (pointLifetime - age) / pointLifetime;
    lineCanvasContext.strokeStyle = 'rgba(0, 0, 0, ' + opacity + ')';
    
    lineCanvasContext.beginPath();
    lineCanvasContext.moveTo(previousPoint.x, previousPoint.y);
    lineCanvasContext.lineTo(point.x, point.y);
    lineCanvasContext.stroke();
  }
}

/**
 * @param {{x: number, y: number}} a
 * @param {{x: number, y: number}} b
 * @return {number} The distance between points a and b
 */
function getDistanceBetween(a, b) {
  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
}

/**
 * Draws the original image, masked by the line drawn in drawLineToCanvas.
 */
function drawImageCanvas() {
  // Emulate background-size: cover
  var width = imageCanvas.width;
  var height = imageCanvas.width / image.naturalWidth * image.naturalHeight;
  
  if (height < imageCanvas.height) {
    width = imageCanvas.height / image.naturalHeight * image.naturalWidth;
    height = imageCanvas.height;
  }

  imageCanvasContext.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
  imageCanvasContext.globalCompositeOperation = 'source-over';
  imageCanvasContext.drawImage(image, 0, 0, width, height);
  imageCanvasContext.globalCompositeOperation = 'destination-in';
  imageCanvasContext.drawImage(lineCanvas, 0, 0);
}

html,
body {
  font-size: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: white;
}

img {
  display: none;
}

从鼠标移动背景图像中移除模糊效果

1 个答案: