当前位置： 文江博客话题详情

将图像映射到 JS 布上并创建滑块

发布于 2025-01-14 08:03:36 字数 10666 浏览 2 评论 0原文

这是网站的所有代码，它有很多错误，例如页脚卡在中间。所以我的想法是创建 11 种不同的组织，格式为映射到我的 JS 的图像，但我不知道该怎么做。[![样本组织][1]][1]

我想创建一个当您单击集合编号时，滑块将切换到下一个集合。

此外，所有链接在悬停时仅采用尺寸而不采用列宽。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$</title>
 <link rel="stylesheet" href="normalize.css">
  <style type="text/css">
    * {
    margin: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-family: sans-serif;
}
body {
}
#c {
    display: block;
    margin: 20px auto 0;
}
#info {
    position: absolute;
    left: -1px;
    top: -1px;
    width: auto;
    max-width: 420px;
    height: auto;
    background: #f8f8f8;
    border-bottom-right-radius: 10px;
    border:1px solid #ccc;
}
#top {
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #eee;
}
p {
    font-family: Arial, sans-serif;
    color: #666;
    text-align: justify;
    font-size: 16px;
    margin: 0px 16px;
}
#github, #twitter {
  color:#3377ee;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  text-decoration:none;
}
.center {
  text-align: center;
}
#net {
  text-align:center;
  white-space:nowrap;
  font-size:19px;
  background:rgba(0,0,0,0.1);
  padding:8px 12px;
  border-radius:8px;
  display:block;
  color:#888;
}
#net > span {
  color:#3377ee;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-decoration:none;
}


.bull {
  opacity: 0.3;
  margin: 0 6px;
  font-size: 14px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid black;
}

.column {
  flex-basis: 100%;
  border-right: 1px solid black;
}

@media screen and (min-width: 800px) {
  .column {
    flex: 1;
  }
}

@media screen and (min-width: 800px) {
  ._25 {
    flex: 2.5;
  }
  ._55 {
    flex: 5.5;
  }
  ._20 {
    flex: 2;
  }
}
 a:link {
  text-decoration: none;
}

 a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: white;
background: black;}

 a:active {
  text-decoration: none;
    color: white;
background: black;
}
  </style>
</head>
<body>
<div class="row">
  <div class="column">
    <a href="">Rakṣas Sari collection</a>
  </div>
  <div class="column">
   <a href=""> Concept</a>
  </div>
  <div class="column">
   <a href=""> Process</a>
  </div>
</div>
<div class="row">
  <div class="column">
   <a href=""> Red Collection N°1</a>
  </div>
  <div class="column">
   <a href=""> Collection N°2</a>
  </div>
  <div class="column">
   <a href=""> Collection N°3</a>
  </div>
  <div class="column">
   <a href=""> Collection N°4</a>
  </div>
  <div class="column">
  <a href="">  Collection N°5</a>
  </div>
  <div class="column">
  <a href="">  Collection N°6</a>
  </div>
  <div class="column">
   <a href=""> Collection N°7</a>
  </div>
  <div class="column">
   <a href=""> Collection N°8</a>
  </div>
  <div class="column">
  <a href="">  Collection N°9</a>
  </div>
  <div class="column">
   <a href=""> Collection N°10</a>
  </div>
  <div class="column">
   <a href=""> Collection N°11</a>
  </div>
</div>
<div class="row">
  <div class="column _25">
    Project photoshoot
  </div>
  <div class="column _55">
    <canvas id="c"></canvas>


  <div id="top">
    <a id="close" href="">Reset tissue</a>
  </div>
  </div>
  <div class="column _20">
    Red is a celebratory color. It commemorates a couple’s union. It symbolizes love, sensuality, and passion. That’s why it features prominently in auspicious occasions, such as weddings, festivals, and births. As red also signifies chastity, it is the color of choice for brides. 
  </div>
</div>



  
<footer>
  <div class="row">
  <div class="column">
    ©Copyright Angelo Barbattini
  </div>
  <div class="column">
   ECAL 2022
  </div>
</div>
</footer style="position: fixed;bottom: 0;">
<!--div id="new">
  Wobble some <a target="_blank" href="https://codepen.io/dissimulate/details/dJgMaO">jelly</a> <span class="bull">&bull;</span>
  Check out my <a target="_blank" href="https://www.instagram.com/abro_oks/">instagram!</a>
</div-->
<script type="text/javascript">
  document.getElementById("close").onmousedown = function (e) {
  e.preventDefault();
  document.getElementById("info").style.display = "none";
  return false;
};

// settings

var physics_accuracy = 3,
  mouse_influence = 20,
  mouse_cut = 5,
  gravity = 1200,
  cloth_height = 30,
  cloth_width = 50,
  start_y = 20,
  spacing = 7,
  tear_distance = 60;

window.requestAnimFrame =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };

var canvas,
  ctx,
  cloth,
  boundsx,
  boundsy,
  mouse = {
    down: false,
    button: 1,
    x: 0,
    y: 0,
    px: 0,
    py: 0
  };

var Point = function (x, y) {
  this.x = x;
  this.y = y;
  this.px = x;
  this.py = y;
  this.vx = 0;
  this.vy = 0;
  this.pin_x = null;
  this.pin_y = null;

  this.constraints = [];
};

Point.prototype.update = function (delta) {
  if (mouse.down) {
    var diff_x = this.x - mouse.x,
      diff_y = this.y - mouse.y,
      dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

    if (mouse.button == 1) {
      if (dist < mouse_influence) {
        this.px = this.x - (mouse.x - mouse.px) * 1.8;
        this.py = this.y - (mouse.y - mouse.py) * 1.8;
      }
    } else if (dist < mouse_cut) this.constraints = [];
  }

  this.add_force(0, gravity);

  delta *= delta;
  nx = this.x + (this.x - this.px) * 0.99 + (this.vx / 2) * delta;
  ny = this.y + (this.y - this.py) * 0.99 + (this.vy / 2) * delta;

  this.px = this.x;
  this.py = this.y;

  this.x = nx;
  this.y = ny;

  this.vy = this.vx = 0;
};

Point.prototype.draw = function () {
  if (!this.constraints.length) return;

  var i = this.constraints.length;
  while (i--) this.constraints[i].draw();
};

Point.prototype.resolve_constraints = function () {
  if (this.pin_x != null && this.pin_y != null) {
    this.x = this.pin_x;
    this.y = this.pin_y;
    return;
  }

  var i = this.constraints.length;
  while (i--) this.constraints[i].resolve();

  this.x > boundsx
    ? (this.x = 2 * boundsx - this.x)
    : 1 > this.x && (this.x = 2 - this.x);
  this.y < 1
    ? (this.y = 2 - this.y)
    : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};

Point.prototype.attach = function (point) {
  this.constraints.push(new Constraint(this, point));
};

Point.prototype.remove_constraint = function (constraint) {
  this.constraints.splice(this.constraints.indexOf(constraint), 1);
};

Point.prototype.add_force = function (x, y) {
  this.vx += x;
  this.vy += y;

  var round = 400;
  this.vx = ~~(this.vx * round) / round;
  this.vy = ~~(this.vy * round) / round;
};

Point.prototype.pin = function (pinx, piny) {
  this.pin_x = pinx;
  this.pin_y = piny;
};

var Constraint = function (p1, p2) {
  this.p1 = p1;
  this.p2 = p2;
  this.length = spacing;
};

Constraint.prototype.resolve = function () {
  var diff_x = this.p1.x - this.p2.x,
    diff_y = this.p1.y - this.p2.y,
    dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
    diff = (this.length - dist) / dist;

  if (dist > tear_distance) this.p1.remove_constraint(this);

  var px = diff_x * diff * 0.5;
  var py = diff_y * diff * 0.5;

  this.p1.x += px;
  this.p1.y += py;
  this.p2.x -= px;
  this.p2.y -= py;
};

Constraint.prototype.draw = function () {
  ctx.moveTo(this.p1.x, this.p1.y);
  ctx.lineTo(this.p2.x, this.p2.y);
};

var Cloth = function () {
  this.points = [];

  var start_x = canvas.width / 2 - (cloth_width * spacing) / 2;

  for (var y = 0; y <= cloth_height; y++) {
    for (var x = 0; x <= cloth_width; x++) {
      var p = new Point(start_x + x * spacing, start_y + y * spacing);

      x != 0 && p.attach(this.points[this.points.length - 1]);
      y == 0 && p.pin(p.x, p.y);
      y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)]);

      this.points.push(p);
    }
  }
};

Cloth.prototype.update = function () {
  var i = physics_accuracy;

  while (i--) {
    var p = this.points.length;
    while (p--) this.points[p].resolve_constraints();
  }

  i = this.points.length;
  while (i--) this.points[i].update(0.016);
};

Cloth.prototype.draw = function () {
  ctx.beginPath();

  var i = cloth.points.length;
  while (i--) cloth.points[i].draw();

  ctx.stroke();
};

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  cloth.update();
  cloth.draw();

  requestAnimFrame(update);
}

function start() {
  canvas.onmousedown = function (e) {
    mouse.button = e.which;
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    var rect = canvas.getBoundingClientRect();
    (mouse.x = e.clientX - rect.left),
      (mouse.y = e.clientY - rect.top),
      (mouse.down = true);
    e.preventDefault();
  };

  canvas.onmouseup = function (e) {
    mouse.down = false;
    e.preventDefault();
  };

  canvas.onmousemove = function (e) {
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    var rect = canvas.getBoundingClientRect();
    (mouse.x = e.clientX - rect.left),
      (mouse.y = e.clientY - rect.top),
      e.preventDefault();
  };

  canvas.oncontextmenu = function (e) {
    e.preventDefault();
  };

  boundsx = canvas.width - 1;
  boundsy = canvas.height - 1;

  ctx.strokeStyle = "#888";

  cloth = new Cloth();

  update();
}

window.onload = function () {
  canvas = document.getElementById("c");
  ctx = canvas.getContext("2d");

  canvas.width = 560;
  canvas.height = 350;

  start();
};

</script>
</body>
</html>```


  [1]: https://i.sstatic.net/Celmj.jpg
原文

Here is all the code for the website, it has many bugs, like the footer which is stuck in the middle. So the idea is to create 11 different tissues in the format of this image mapped to the JS I have, bit i dont know how to do that.[![sample tissue][1]][1]

I would like to create a slider that functions when you click on the collection number it switchees to the next collection.

Also all the links only take the size and not the column width when hovered.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
lt;/title>
 <link rel="stylesheet" href="normalize.css">
  <style type="text/css">
    * {
    margin: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-family: sans-serif;
}
body {
}
#c {
    display: block;
    margin: 20px auto 0;
}
#info {
    position: absolute;
    left: -1px;
    top: -1px;
    width: auto;
    max-width: 420px;
    height: auto;
    background: #f8f8f8;
    border-bottom-right-radius: 10px;
    border:1px solid #ccc;
}
#top {
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #eee;
}
p {
    font-family: Arial, sans-serif;
    color: #666;
    text-align: justify;
    font-size: 16px;
    margin: 0px 16px;
}
#github, #twitter {
  color:#3377ee;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  text-decoration:none;
}
.center {
  text-align: center;
}
#net {
  text-align:center;
  white-space:nowrap;
  font-size:19px;
  background:rgba(0,0,0,0.1);
  padding:8px 12px;
  border-radius:8px;
  display:block;
  color:#888;
}
#net > span {
  color:#3377ee;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-decoration:none;
}


.bull {
  opacity: 0.3;
  margin: 0 6px;
  font-size: 14px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid black;
}

.column {
  flex-basis: 100%;
  border-right: 1px solid black;
}

@media screen and (min-width: 800px) {
  .column {
    flex: 1;
  }
}

@media screen and (min-width: 800px) {
  ._25 {
    flex: 2.5;
  }
  ._55 {
    flex: 5.5;
  }
  ._20 {
    flex: 2;
  }
}
 a:link {
  text-decoration: none;
}

 a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: white;
background: black;}

 a:active {
  text-decoration: none;
    color: white;
background: black;
}
  </style>
</head>
<body>
<div class="row">
  <div class="column">
    <a href="">Rakṣas Sari collection</a>
  </div>
  <div class="column">
   <a href=""> Concept</a>
  </div>
  <div class="column">
   <a href=""> Process</a>
  </div>
</div>
<div class="row">
  <div class="column">
   <a href=""> Red Collection N°1</a>
  </div>
  <div class="column">
   <a href=""> Collection N°2</a>
  </div>
  <div class="column">
   <a href=""> Collection N°3</a>
  </div>
  <div class="column">
   <a href=""> Collection N°4</a>
  </div>
  <div class="column">
  <a href="">  Collection N°5</a>
  </div>
  <div class="column">
  <a href="">  Collection N°6</a>
  </div>
  <div class="column">
   <a href=""> Collection N°7</a>
  </div>
  <div class="column">
   <a href=""> Collection N°8</a>
  </div>
  <div class="column">
  <a href="">  Collection N°9</a>
  </div>
  <div class="column">
   <a href=""> Collection N°10</a>
  </div>
  <div class="column">
   <a href=""> Collection N°11</a>
  </div>
</div>
<div class="row">
  <div class="column _25">
    Project photoshoot
  </div>
  <div class="column _55">
    <canvas id="c"></canvas>


  <div id="top">
    <a id="close" href="">Reset tissue</a>
  </div>
  </div>
  <div class="column _20">
    Red is a celebratory color. It commemorates a couple’s union. It symbolizes love, sensuality, and passion. That’s why it features prominently in auspicious occasions, such as weddings, festivals, and births. As red also signifies chastity, it is the color of choice for brides. 
  </div>
</div>



  
<footer>
  <div class="row">
  <div class="column">
    ©Copyright Angelo Barbattini
  </div>
  <div class="column">
   ECAL 2022
  </div>
</div>
</footer style="position: fixed;bottom: 0;">
<!--div id="new">
  Wobble some <a target="_blank" href="https://codepen.io/dissimulate/details/dJgMaO">jelly</a> <span class="bull">•</span>
  Check out my <a target="_blank" href="https://www.instagram.com/abro_oks/">instagram!</a>
</div-->
<script type="text/javascript">
  document.getElementById("close").onmousedown = function (e) {
  e.preventDefault();
  document.getElementById("info").style.display = "none";
  return false;
};

// settings

var physics_accuracy = 3,
  mouse_influence = 20,
  mouse_cut = 5,
  gravity = 1200,
  cloth_height = 30,
  cloth_width = 50,
  start_y = 20,
  spacing = 7,
  tear_distance = 60;

window.requestAnimFrame =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };

var canvas,
  ctx,
  cloth,
  boundsx,
  boundsy,
  mouse = {
    down: false,
    button: 1,
    x: 0,
    y: 0,
    px: 0,
    py: 0
  };

var Point = function (x, y) {
  this.x = x;
  this.y = y;
  this.px = x;
  this.py = y;
  this.vx = 0;
  this.vy = 0;
  this.pin_x = null;
  this.pin_y = null;

  this.constraints = [];
};

Point.prototype.update = function (delta) {
  if (mouse.down) {
    var diff_x = this.x - mouse.x,
      diff_y = this.y - mouse.y,
      dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

    if (mouse.button == 1) {
      if (dist < mouse_influence) {
        this.px = this.x - (mouse.x - mouse.px) * 1.8;
        this.py = this.y - (mouse.y - mouse.py) * 1.8;
      }
    } else if (dist < mouse_cut) this.constraints = [];
  }

  this.add_force(0, gravity);

  delta *= delta;
  nx = this.x + (this.x - this.px) * 0.99 + (this.vx / 2) * delta;
  ny = this.y + (this.y - this.py) * 0.99 + (this.vy / 2) * delta;

  this.px = this.x;
  this.py = this.y;

  this.x = nx;
  this.y = ny;

  this.vy = this.vx = 0;
};

Point.prototype.draw = function () {
  if (!this.constraints.length) return;

  var i = this.constraints.length;
  while (i--) this.constraints[i].draw();
};

Point.prototype.resolve_constraints = function () {
  if (this.pin_x != null && this.pin_y != null) {
    this.x = this.pin_x;
    this.y = this.pin_y;
    return;
  }

  var i = this.constraints.length;
  while (i--) this.constraints[i].resolve();

  this.x > boundsx
    ? (this.x = 2 * boundsx - this.x)
    : 1 > this.x && (this.x = 2 - this.x);
  this.y < 1
    ? (this.y = 2 - this.y)
    : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};

Point.prototype.attach = function (point) {
  this.constraints.push(new Constraint(this, point));
};

Point.prototype.remove_constraint = function (constraint) {
  this.constraints.splice(this.constraints.indexOf(constraint), 1);
};

Point.prototype.add_force = function (x, y) {
  this.vx += x;
  this.vy += y;

  var round = 400;
  this.vx = ~~(this.vx * round) / round;
  this.vy = ~~(this.vy * round) / round;
};

Point.prototype.pin = function (pinx, piny) {
  this.pin_x = pinx;
  this.pin_y = piny;
};

var Constraint = function (p1, p2) {
  this.p1 = p1;
  this.p2 = p2;
  this.length = spacing;
};

Constraint.prototype.resolve = function () {
  var diff_x = this.p1.x - this.p2.x,
    diff_y = this.p1.y - this.p2.y,
    dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
    diff = (this.length - dist) / dist;

  if (dist > tear_distance) this.p1.remove_constraint(this);

  var px = diff_x * diff * 0.5;
  var py = diff_y * diff * 0.5;

  this.p1.x += px;
  this.p1.y += py;
  this.p2.x -= px;
  this.p2.y -= py;
};

Constraint.prototype.draw = function () {
  ctx.moveTo(this.p1.x, this.p1.y);
  ctx.lineTo(this.p2.x, this.p2.y);
};

var Cloth = function () {
  this.points = [];

  var start_x = canvas.width / 2 - (cloth_width * spacing) / 2;

  for (var y = 0; y <= cloth_height; y++) {
    for (var x = 0; x <= cloth_width; x++) {
      var p = new Point(start_x + x * spacing, start_y + y * spacing);

      x != 0 && p.attach(this.points[this.points.length - 1]);
      y == 0 && p.pin(p.x, p.y);
      y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)]);

      this.points.push(p);
    }
  }
};

Cloth.prototype.update = function () {
  var i = physics_accuracy;

  while (i--) {
    var p = this.points.length;
    while (p--) this.points[p].resolve_constraints();
  }

  i = this.points.length;
  while (i--) this.points[i].update(0.016);
};

Cloth.prototype.draw = function () {
  ctx.beginPath();

  var i = cloth.points.length;
  while (i--) cloth.points[i].draw();

  ctx.stroke();
};

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  cloth.update();
  cloth.draw();

  requestAnimFrame(update);
}

function start() {
  canvas.onmousedown = function (e) {
    mouse.button = e.which;
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    var rect = canvas.getBoundingClientRect();
    (mouse.x = e.clientX - rect.left),
      (mouse.y = e.clientY - rect.top),
      (mouse.down = true);
    e.preventDefault();
  };

  canvas.onmouseup = function (e) {
    mouse.down = false;
    e.preventDefault();
  };

  canvas.onmousemove = function (e) {
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    var rect = canvas.getBoundingClientRect();
    (mouse.x = e.clientX - rect.left),
      (mouse.y = e.clientY - rect.top),
      e.preventDefault();
  };

  canvas.oncontextmenu = function (e) {
    e.preventDefault();
  };

  boundsx = canvas.width - 1;
  boundsy = canvas.height - 1;

  ctx.strokeStyle = "#888";

  cloth = new Cloth();

  update();
}

window.onload = function () {
  canvas = document.getElementById("c");
  ctx = canvas.getContext("2d");

  canvas.width = 560;
  canvas.height = 350;

  start();
};

</script>
</body>
</html>```


  [1]: https://i.sstatic.net/Celmj.jpg

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
扫码二维码加入Web技术交流群
发布评论
 
需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
   
评论（1）
天荒地未老 2025-01-21 08:03:36
提问者关注的是让实际图像看起来像随风移动的材料的问题。
为此提供的代码将画布划分为小的矩形元素，并根据给定的“物理”（例如重力/风的值）的要求移动每个元素。
原始版本只是为每个区域绘制网格线。我们需要的是将原始图像中的等效矩形复制到该点。
此代码片段通过将 origx/y 添加到有关每个点的信息中来实现此目的，以便我们知道在哪里可以找到原始矩形。
它将图像放入 img 元素中（重要的是要等到该元素加载后再对其进行更多操作），然后将其复制到屏幕外的画布上，该画布的尺寸与保存材质的画布尺寸相同。当我们需要将“迷你图像”放置在给定点时，会检查该画布。
警告：此代码（即使没有引入图像）是相当处理器密集型的。在一台功能强大、GPU 良好的笔记本电脑上，它占用了大约 19% 的 CPU 资源，GPU 资源占用也不少，而且风扇还在呼呼作响。即使鼠标没有移动也是如此。该代码可以进行彻底的检查，例如在用户活动完成时停止计时器，并且可能降低帧速率（在给定代码中为 60fps）。我不建议将其放在网页中并继续运行 - 这将是一个电池消耗者。
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    -->

  <script type="text/javascript" src=""></script>
  <link rel="stylesheet" type="text/css" href="">

  <style type="text/css">
    body {}
    
    .wrapper {}
    
    * {
      margin: 0;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    
    body {
      background: #333;
    }
    
    canvas {
      background: #333;
      width: 100%;
      height: 376px;
      margin: 0 auto;
      display: block;
      border: solid red 2px;
    }
    
    #info {
      position: absolute;
      left: -1px;
      top: -1px;
      width: auto;
      max-width: 380px;
      height: auto;
      background: #f2f2f2;
      border-bottom-right-radius: 10px;
    }
    
    #top {
      background: #fff;
      width: 100%;
      height: auto;
      position: relative;
      border-bottom: 1px solid #eee;
    }
    
    p {
      font-family: Arial, sans-serif;
      color: #666;
      text-align: justify;
      font-size: 16px;
      margin: 10px;
    }
    
    a {
      font-family: sans-serif;
      color: #444;
      text-decoration: none;
      font-size: 20px;
    }
    
    #site {
      float: left;
      margin: 10px;
      color: #38a;
      border-bottom: 1px dashed #888;
    }
    
    #site:hover {
      color: #7af;
    }
    
    #close {
      float: right;
      margin: 10px;
    }
    
    #p {
      font-family: Verdana, sans-serif;
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #adf;
      border: 1px dashed #555;
      padding: 4px 8px;
    }
  </style>
  <img src="https://i.sstatic.net/Celmj.jpg" style="margin-top: -2000px; position: absolute;">
  <canvas width="1360" height="376" style="margin-top: -2000px; position: absolute;"></canvas>
  <script type="text/javascript">
    /*
    Copyright (c) 2013 lonely-pixel.com, Stuffit at codepen.io (http://codepen.io/stuffit)

    View this and others at http://lonely-pixel.com

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
    */


    const mycanvas = document.querySelector('canvas');
    const mycontext = mycanvas.getContext('2d');

    // settings


    var physics_accuracy = 5,
      mouse_influence = 20,
      mouse_cut = 6,
      gravity = 900,
      cloth_height = 30,
      cloth_width = 50,
      start_y = 20,
      spacing = 7,
      tear_distance = 60;


    window.requestAnimFrame =
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };

    var canvas,
      ctx,
      cloth,
      boundsx,
      boundsy,
      mouse = {
        down: false,
        button: 1,
        x: 0,
        y: 0,
        px: 0,
        py: 0
      };

    window.onload = function() {
      // ADDED TO BRING IN THE IMAGE
      mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
      mycontext.drawImage(document.querySelector('img'), 0, 0, 1180, 376);


      canvas = document.getElementById('c');
      ctx = canvas.getContext('2d');

      canvas.width = canvas.clientWidth;
      canvas.height = 376;

      canvas.onmousedown = function(e) {
        mouse.button = e.which;
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
          mouse.y = e.clientY - rect.top,
          mouse.down = true;
        e.preventDefault();
      };

      canvas.onmouseup = function(e) {
        mouse.down = false;
        e.preventDefault();
      };

      canvas.onmousemove = function(e) {
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
          mouse.y = e.clientY - rect.top,
          e.preventDefault();
      };

      canvas.oncontextmenu = function(e) {
        e.preventDefault();
      };

      boundsx = canvas.width - 1;
      boundsy = canvas.height - 1;

      ctx.strokeStyle = 'rgba(222,222,222,0.6)';
      ctx.strokeStyle = 'magenta';
      cloth = new Cloth();
      update();
    };

    var Point = function(x, y) {

      this.x = x;
      this.y = y;
      this.px = x;
      this.py = y;
      this.vx = 0;
      this.vy = 0;
      this.pin_x = null;
      this.pin_y = null;
      this.constraints = [];
      //added - remember where this point was originally so we can get the right bit of the img
      this.origx = x;
      this.origy = y;
    };

    Point.prototype.update = function(delta) {

      if (mouse.down) {

        var diff_x = this.x - mouse.x,
          diff_y = this.y - mouse.y,
          dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

        if (mouse.button == 1) {

          if (dist < mouse_influence) {
            this.px = this.x - (mouse.x - mouse.px) * 1.8;
            this.py = this.y - (mouse.y - mouse.py) * 1.8;
          }

        } else if (dist < mouse_cut) this.constraints = [];
      }

      this.add_force(0, gravity);

      delta *= delta;
      nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
      ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

      this.px = this.x;
      this.py = this.y;

      this.x = nx;
      this.y = ny;

      this.vy = this.vx = 0
    };

    Point.prototype.draw = function() {

      if (this.constraints.length <= 0) return;

      var i = this.constraints.length;
      while (i--) this.constraints[i].draw();
    };

    Point.prototype.resolve_constraints = function() {

      if (this.pin_x != null && this.pin_y != null) {

        this.x = this.pin_x;
        this.y = this.pin_y;
        return;
      }

      var i = this.constraints.length;
      while (i--) this.constraints[i].resolve();

      this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
      this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
    };

    Point.prototype.attach = function(point) {

      this.constraints.push(
        new Constraint(this, point)
      );
    };

    Point.prototype.remove_constraint = function(lnk) {

      var i = this.constraints.length;
      while (i--)
        if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
    };

    Point.prototype.add_force = function(x, y) {

      this.vx += x;
      this.vy += y;
    };

    Point.prototype.pin = function(pinx, piny) {
      this.pin_x = pinx;
      this.pin_y = piny;
    };

    var Constraint = function(p1, p2) {

      this.p1 = p1;
      this.p2 = p2;
      this.length = spacing;
    };

    Constraint.prototype.resolve = function() {

      var diff_x = this.p1.x - this.p2.x,
        diff_y = this.p1.y - this.p2.y,
        dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
        diff = (this.length - dist) / dist;

      if (dist > tear_distance) this.p1.remove_constraint(this);

      var px = diff_x * diff * 0.5;
      var py = diff_y * diff * 0.5;

      this.p1.x += px;
      this.p1.y += py;
      this.p2.x -= px;
      this.p2.y -= py;
    };
    let num = 0;
    Constraint.prototype.draw = function() {

      ctx.drawImage(mycanvas, this.p1.origx, this.p1.origy, spacing, spacing, this.p1.x, this.p1.y, spacing + 1, spacing + 1);
    };

    var Cloth = function() {

      this.points = [];

      var start_x = canvas.width / 2 - cloth_width * spacing / 2;

      for (var y = 0; y <= cloth_height; y++) {

        for (var x = 0; x <= cloth_width; x++) {

          var p = new Point(start_x + x * spacing, start_y + y * spacing);

          x != 0 && p.attach(this.points[this.points.length - 1]);
          y == 0 && p.pin(p.x, p.y);
          y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

          this.points.push(p);
        }
      }
    };

    Cloth.prototype.update = function() {

      var i = physics_accuracy;

      while (i--) {
        var p = this.points.length;
        while (p--) this.points[p].resolve_constraints();
      }

      i = this.points.length;
      while (i--) this.points[i].update(.016);
    };

    Cloth.prototype.draw = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();

      var i = cloth.points.length;
      while (i--) cloth.points[i].draw();

      ctx.stroke();
    };

    function update() {

      cloth.update();
      cloth.draw();

      requestAnimFrame(update);
    }
  </script>

</head>

<body>

  <canvas id="c" width="800" height="376"> </canvas>




</body>

</html>
注意：右键单击可以“撕裂”材料，并且此功能可能需要删除 - 除非您希望用户破坏布料的外观:)
The questioner is focusing on the problem of getting an actual image to look like material being moved with the wind.
The code presented to do this divides a canvas into small rectangular elements and moves each of those as required by the 'physics' given (value of gravity/wind for example).
The original just draws grid lines for each of these areas. What we need is for the equivalent rectangle in the original image to be copied to that point.
This snippet achieves this by adding a origx/y to the info kept about each point so that we know where to find the original rectangle.
It brings the image into an img element (it is important to wait until this is loaded before doing more with it) then copies it to an off-screen canvas that has the same dimensions as the one which will hold the material. This canvas is inspected when we need the 'mini image' to put at a given point.
WARNING: this code (even without the introduction of an image) is pretty processor intensive. On a farily powerful laptop with good GPU it was taking around 19% of CPU and not much less of GPU and the fan was whirring. This is even when there is no movement of the mouse. The code could do with a thorough look through, for example to stop the timer when user activity is completed, and perhaps putting the frame rate down (it's 60fps in the given code). I would not recommend it be put in a webpage and left there running - it will be a battery drainer.
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    -->

  <script type="text/javascript" src=""></script>
  <link rel="stylesheet" type="text/css" href="">

  <style type="text/css">
    body {}
    
    .wrapper {}
    
    * {
      margin: 0;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    
    body {
      background: #333;
    }
    
    canvas {
      background: #333;
      width: 100%;
      height: 376px;
      margin: 0 auto;
      display: block;
      border: solid red 2px;
    }
    
    #info {
      position: absolute;
      left: -1px;
      top: -1px;
      width: auto;
      max-width: 380px;
      height: auto;
      background: #f2f2f2;
      border-bottom-right-radius: 10px;
    }
    
    #top {
      background: #fff;
      width: 100%;
      height: auto;
      position: relative;
      border-bottom: 1px solid #eee;
    }
    
    p {
      font-family: Arial, sans-serif;
      color: #666;
      text-align: justify;
      font-size: 16px;
      margin: 10px;
    }
    
    a {
      font-family: sans-serif;
      color: #444;
      text-decoration: none;
      font-size: 20px;
    }
    
    #site {
      float: left;
      margin: 10px;
      color: #38a;
      border-bottom: 1px dashed #888;
    }
    
    #site:hover {
      color: #7af;
    }
    
    #close {
      float: right;
      margin: 10px;
    }
    
    #p {
      font-family: Verdana, sans-serif;
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #adf;
      border: 1px dashed #555;
      padding: 4px 8px;
    }
  </style>
  <img src="https://i.sstatic.net/Celmj.jpg" style="margin-top: -2000px; position: absolute;">
  <canvas width="1360" height="376" style="margin-top: -2000px; position: absolute;"></canvas>
  <script type="text/javascript">
    /*
    Copyright (c) 2013 lonely-pixel.com, Stuffit at codepen.io (http://codepen.io/stuffit)

    View this and others at http://lonely-pixel.com

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
    */


    const mycanvas = document.querySelector('canvas');
    const mycontext = mycanvas.getContext('2d');

    // settings


    var physics_accuracy = 5,
      mouse_influence = 20,
      mouse_cut = 6,
      gravity = 900,
      cloth_height = 30,
      cloth_width = 50,
      start_y = 20,
      spacing = 7,
      tear_distance = 60;


    window.requestAnimFrame =
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };

    var canvas,
      ctx,
      cloth,
      boundsx,
      boundsy,
      mouse = {
        down: false,
        button: 1,
        x: 0,
        y: 0,
        px: 0,
        py: 0
      };

    window.onload = function() {
      // ADDED TO BRING IN THE IMAGE
      mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
      mycontext.drawImage(document.querySelector('img'), 0, 0, 1180, 376);


      canvas = document.getElementById('c');
      ctx = canvas.getContext('2d');

      canvas.width = canvas.clientWidth;
      canvas.height = 376;

      canvas.onmousedown = function(e) {
        mouse.button = e.which;
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
          mouse.y = e.clientY - rect.top,
          mouse.down = true;
        e.preventDefault();
      };

      canvas.onmouseup = function(e) {
        mouse.down = false;
        e.preventDefault();
      };

      canvas.onmousemove = function(e) {
        mouse.px = mouse.x;
        mouse.py = mouse.y;
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left,
          mouse.y = e.clientY - rect.top,
          e.preventDefault();
      };

      canvas.oncontextmenu = function(e) {
        e.preventDefault();
      };

      boundsx = canvas.width - 1;
      boundsy = canvas.height - 1;

      ctx.strokeStyle = 'rgba(222,222,222,0.6)';
      ctx.strokeStyle = 'magenta';
      cloth = new Cloth();
      update();
    };

    var Point = function(x, y) {

      this.x = x;
      this.y = y;
      this.px = x;
      this.py = y;
      this.vx = 0;
      this.vy = 0;
      this.pin_x = null;
      this.pin_y = null;
      this.constraints = [];
      //added - remember where this point was originally so we can get the right bit of the img
      this.origx = x;
      this.origy = y;
    };

    Point.prototype.update = function(delta) {

      if (mouse.down) {

        var diff_x = this.x - mouse.x,
          diff_y = this.y - mouse.y,
          dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

        if (mouse.button == 1) {

          if (dist < mouse_influence) {
            this.px = this.x - (mouse.x - mouse.px) * 1.8;
            this.py = this.y - (mouse.y - mouse.py) * 1.8;
          }

        } else if (dist < mouse_cut) this.constraints = [];
      }

      this.add_force(0, gravity);

      delta *= delta;
      nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
      ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

      this.px = this.x;
      this.py = this.y;

      this.x = nx;
      this.y = ny;

      this.vy = this.vx = 0
    };

    Point.prototype.draw = function() {

      if (this.constraints.length <= 0) return;

      var i = this.constraints.length;
      while (i--) this.constraints[i].draw();
    };

    Point.prototype.resolve_constraints = function() {

      if (this.pin_x != null && this.pin_y != null) {

        this.x = this.pin_x;
        this.y = this.pin_y;
        return;
      }

      var i = this.constraints.length;
      while (i--) this.constraints[i].resolve();

      this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
      this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
    };

    Point.prototype.attach = function(point) {

      this.constraints.push(
        new Constraint(this, point)
      );
    };

    Point.prototype.remove_constraint = function(lnk) {

      var i = this.constraints.length;
      while (i--)
        if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
    };

    Point.prototype.add_force = function(x, y) {

      this.vx += x;
      this.vy += y;
    };

    Point.prototype.pin = function(pinx, piny) {
      this.pin_x = pinx;
      this.pin_y = piny;
    };

    var Constraint = function(p1, p2) {

      this.p1 = p1;
      this.p2 = p2;
      this.length = spacing;
    };

    Constraint.prototype.resolve = function() {

      var diff_x = this.p1.x - this.p2.x,
        diff_y = this.p1.y - this.p2.y,
        dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
        diff = (this.length - dist) / dist;

      if (dist > tear_distance) this.p1.remove_constraint(this);

      var px = diff_x * diff * 0.5;
      var py = diff_y * diff * 0.5;

      this.p1.x += px;
      this.p1.y += py;
      this.p2.x -= px;
      this.p2.y -= py;
    };
    let num = 0;
    Constraint.prototype.draw = function() {

      ctx.drawImage(mycanvas, this.p1.origx, this.p1.origy, spacing, spacing, this.p1.x, this.p1.y, spacing + 1, spacing + 1);
    };

    var Cloth = function() {

      this.points = [];

      var start_x = canvas.width / 2 - cloth_width * spacing / 2;

      for (var y = 0; y <= cloth_height; y++) {

        for (var x = 0; x <= cloth_width; x++) {

          var p = new Point(start_x + x * spacing, start_y + y * spacing);

          x != 0 && p.attach(this.points[this.points.length - 1]);
          y == 0 && p.pin(p.x, p.y);
          y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

          this.points.push(p);
        }
      }
    };

    Cloth.prototype.update = function() {

      var i = physics_accuracy;

      while (i--) {
        var p = this.points.length;
        while (p--) this.points[p].resolve_constraints();
      }

      i = this.points.length;
      while (i--) this.points[i].update(.016);
    };

    Cloth.prototype.draw = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();

      var i = cloth.points.length;
      while (i--) cloth.points[i].draw();

      ctx.stroke();
    };

    function update() {

      cloth.update();
      cloth.draw();

      requestAnimFrame(update);
    }
  </script>

</head>

<body>

  <canvas id="c" width="800" height="376"> </canvas>




</body>

</html>
Note: it is possible to 'tear' the material with a right click and this facility probably needs removing - unless you want users to ruin the look of the cloth :)
 回复 原文 
~没有更多了~
关于作者
 缱绻入梦
暂无简介
 文章
 评论
28 人气
 发私信
相关话题
更多 
热门标签
操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多 
推荐作者
动次打次papapa
文章 0 评论 0
我是有多爱你
文章 0 评论 0
原来分手还会想你
文章 0 评论 0
linces
文章 0 评论 0
霓裳挽歌倾城醉
文章 0 评论 0
玍銹的英雄夢
文章 0 评论 0
更多 
友情链接
文江博客
       
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
     
    原文