canvas水墨线条跟随鼠标画画交互效果代码-html代码-BFW代码库

canvas水墨线条跟随鼠标画画交互效果代码

代码语言：html

所属分类：动画

代码描述：canvas水墨线条跟随鼠标画画交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body, html {
    padding: 0;
    margin: 0;
}
</style>


  
  
</head>

<body>
  <canvas></canvas>
  
      <script  >
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');

// for intro motion
let mouseMoved = false;

let mouse = {
  x: .5 * window.innerWidth,
  y: .5 * window.innerHeight,
  tX: 0,
  tY: 0 };

let params = {
  pointsNumber: 40,
  widthFactor: .3,
  mouseThreshold: .6,
  spring: .4,
  friction: .5 };


const touchTrail = new Array(params.pointsNumber);
for (let i = 0; i < params.pointsNumber; i++) {
  touchTrail[i] = {
    x: mouse.x,
    y: mouse.y,
    vx: 0,
    vy: 0 };

}

window.addEventListener("click", e => {
  updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("mousemove", e => {
  mouseMoved = true;
  updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("touchmove", e => {
  mouseMoved = true;
  updateMousePosition(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
});

function updateMousePosition(eX, eY) {
  mouse.tX = eX;
  mouse.tY = eY;
}

setupCanvas();
updateBubbles(0);
window.addEventListener('resize', () => {
  setupCanvas();
});


function updateBubbles(t) {

  // for intr.........完整代码请登录后点击上方下载按钮下载查看