Question

问题

我想在动画后恢复图像的原始亮度。我该怎么办？

说明

在下面的代码中，我以 strips 的形式绘制了图像。每个条带都沿垂直轴位移一定量（类似于水波模拟，从here得到了想法）。但是，在动画之后，图像变得有些暗淡了。为什么会这样？

代码

window.onload = () => {
    // Setup
    const cvs = document.getElementById("cvs");
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
    const c = cvs.getContext("2d");
    c.fillStyle = "rgba(255, 255, 255, 1)";
    
    let phase = 0, margin = 30;
    
    // Flag Image
    let flag = new Image();
    flag.src = document.getElementById("India").src;
    
    flag.onload = () => {
        // c.drawImage(flag, margin, margin); 
        
        // Uncomment the above line and comment out the below line, if you want to see the original contrast.
        
        setInterval(wave, 120);
    }
    
    // Animate function
    let wave = () => {
        c.fillRect(0, 0, cvs.width, cvs.height);
        
        let wid = flag.width;
        
        // Drawing flag in the form of slits
        for(let i = 0; i < wid; i++) {
            let y = margin + Math.sin(i/30 + phase) * 4;
            c.drawImage(flag, i, 0, 1, flag.height, margin + i, y , 0.5, flag.height);
        }
        
        phase += 0.5;
    }
};

body {
    margin: 0;
}
#India {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <img src="https://www.dropbox.com/s/icpsgo3o2hnw64h/510px-Flag_of_India.svg.jpg?raw=1" id="India"/>
        <canvas id="cvs"></canvas>
    </body>
</html>

动画前的图像

动画图像

谢谢！

Answer 1

在此行中将0.5更改为1：

<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
  <div class="row">
    <!-- <div class="col-sm-12" role="heading"> -->
    <div role="heading">
      <div class="region region-header">
      </div>
    </div>
    <section>
      <a id="main-content"></a>
      <div class="region region-content">
        <section class="views-element-container block block-views block-views-blockabout-us-changing-images-block-3 clearfix" id="block-views-block-about-us-changing-images-block-3">
          <div class="form-group">
            <div class="view view-about-us-changing-images view-id-about_us_changing_images view-display-id-block_3 js-view-dom-id-f2624873734f13a6913b256416a10ff6d932a3677c7b77a637cdd2db4a34b6d8">
              <div class="view-content">
                <div class="about-images views-row">
                  <div class="views-field views-field-field__about-us-changing-image-2">
                    <div class="field-content"> <img src="/sites/default/files/2018-07/team_1.jpg" width="2000" height="1000" alt="team" typeof="foaf:Image" class="img-responsive" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <nav role="navigation" aria-labelledby="block-aboutusteam-menu" id="block-aboutusteam">
          <h2 class="visually-hidden" id="block-aboutusteam-menu">About Us: Team</h2>
          <ul class="menu menu--about-us-team nav">
            <li class="expanded dropdown active">
              <a href="/about/team" class="dropdown-toggle" data-toggle="dropdown">OUR TEAM <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="/about" data-drupal-link-system-path="about">ABOUT US</a>
                </li>
                <li>
                  <a href="/about/careers" data-drupal-link-system-path="about/careers">CAREERS</a>
                </li>
                <li>
                  <a href="/about/locations" data-drupal-link-system-path="about/locations">LOCATIONS</a>
                </li>
              </ul>

            </li>
          </ul>
        </nav>
        <div class="views-element-container form-group">
          <div class="view view-about-us view-id-about_us view-display-id-page_3 js-view-dom-id-397ff9a567cc56e3cd5c3a241a47b938891ffac5bf429f45429bea3f12e2f041">
            <div class="view-content">
              <div class="nav-buttons"></div>
              <div class="nav-buttons"><span class="views-field views-field-field-menu-link-1"><span class="field-content nav-buttons"><a href="/about">ABOUT US</a></span></span> <span class="views-field views-field-field-menu-link-2"><span class="field-content nav-buttons"><a href="/about/careers">CAREERS</a></span></span>
                <span class="views-field views-field-field-menu-link-3"><span class="field-content nav-buttons"><a href="/about/team">OUR TEAM</a></span></span> <span class="views-field views-field-field-menu-link-4"><span class="field-content nav-buttons"><a href="/about/locations">LOCATIONS</a></span></span>
              </div>
              <div class="nav-buttons"></div>
              <div class="nav-buttons"></div>
              <div class="nav-buttons"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

在HTML5 Canvas中制作动画后，图像变暗了

1 个答案: