主页 / 问题 / 1099883
Accepted
Sevastopol'
Asked:2020-03-26 06:53:51 +0800 CST2020-03-26 06:53:51 +0800 CST

如何用线条绘制立体图并进行动画处理？

  • 772

如何用线条绘制三维画面，并以改变条纹间距等形式添加灯光动画，以达到“动”的效果，比如让画面动起来？

在此处输入图像描述

css3

2 个回答

  1. Best Answer

    可以显示类似这样的内容：

    document.body.innerHTML += `
  <canvas id="c" width="600" height="600" />
  <img src="https://picsum.photos/id/742/600/600" 
    style="display:none" onload="init(this)" crossorigin>
`;

function init(img) {
    let ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let dx = 10;
    let count = 180;
    let s = c.width;
    let step = s/(count + 1);
    let d = ctx.getImageData(0, 0, s, s);
    requestAnimationFrame(redraw);
    
    function redraw(t){
      ctx.clearRect(0, 0, s, s);
      for (let i = 0; i < count; i++) {
          let y = i*step+step/2;
          y += Math.sin(y/40+t/700)*2
          ctx.beginPath();
          for (let x = 0; x < s; x++) { 
              let o = s*(y|0) + x|0;
              ctx[x?'lineTo':'moveTo'](x, y - d.data[o*4]/40);
          }
          ctx.stroke();
      } 
      requestAnimationFrame(redraw);
    }  
}

    • 12

  2. 这里是最好的解决方案！=)

    <img src="https://isstatic.askoverflow.dev/m5k6o.jpg"><style>body{overflow:hidden;margin:0;padding:0;}img{display:block;margin-top:-2.5%;max-height:110vh;min-height:330px;width:auto;transition:0.5s;animation: animate 0.1s linear infinite;}@keyframes animate {0% {transform: scale(1, 1)}100% {transform: scale(1, 0.99);}}</style>

    为了让卷移动？“虚弱的”？) – 需要讨厌

    特别是对你）

    <div class="img"></div><style>body {overflow:hidden;margin:0;padding:0;}.img {width: 350px;height: 200px;border-radius: 20% 20% 40% 40%;background: url(https://isstatic.askoverflow.dev/m5k6o.jpg);background-size: 200%;background-position-y: -45%;background-position-x: 70%;transition: 0.5s; animation: animate 0.1s linear infinite;}@keyframes animate {0% {transform: scale(1, 1)}100% {transform: scale(1.02, 0.98);}}</style>

    • 10

相关问题