代码之家  ›  专栏  ›  技术社区  ›  vrintle Jake

在HTML5画布中动画后图像变暗

canvas image html5 javascript
  •  1
  • vrintle Jake  · 技术社区  · 7 年前

    问题

    我想还原动画后图像的原始亮度。我该怎么办?

    说明

    在下面的代码中,我以 条带的形式绘制了图像。每个条带沿垂直轴移动一定量(类似于水波模拟,这是从 这里 )。但是,动画之后,图像得到了一定量的“调光器”。为什么会这样?

    代码 

    {
//设置
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)”;

设相位=0,裕度=30;

//标记图像
让flag=new image();
flag.src=document.getElementByID(“India”).src;

flag.onload=()=>。{
//c.drawimage(标志、页边距、页边距);

//如果要查看原始对比度,请取消上面一行的注释并注释下面一行。

设定间隔(波,120);
}

//动画函数
让Wave=()=>。{
c.fillRect(0,0,cvs.width,cvs.height);

设wid=flag.width;

//以狭缝形式绘制标志
对于(让i=0;i<wid;i++){
设y=裕度+数学.sin(i/30+相位)*4;
c.绘图图像(flag,i,0,1,flag.height,margin+i,y,0.5,flag.height);
}

相位+=0.5;
}
};
    body{
边距:0;
}
#印度{
显示:无;
}
    文档类型HTML>
<HTML>
<头部>
<title>页面标题</title>
</head>
<正文>
<img src=“https://www.dropbox.com/s/icpsgo3o2hnw64h/510px-flag ou india.svg.jpg?的原始=1“id=”India“/>
<canvas id=“cvs”></canvas>
</body>
</html>>=
    
         
    
         
          
          
         
        
    
        
         
          
    
           动画前的图像
          
    
          
    
           
            
           
          
    
          
    
           动画时的图像
          
    
          
    
           
            
           
          
    
          
    
           事先谢谢!
          
    
          
           说明
          
          
    
          
    
          
    
           在下面的代码中,我以
           
            条状物
           
           . 每条带沿垂直轴移动一定量(类似于水波模拟,从
           
            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>
    
           
    
          
    
          
    
           动画前的图像
          
    
          
    
           
            enter image description here
           
          
    
          
    
          
    
          
    
           动画时的图像
          
    
          
    
           
            enter image description here
           
          
    
          
    
          
    
          
    
           事先谢谢!
          
    
             
            
           
          
         
    
    
   
    
      
 


                        
    
                    
    
                
    

            
    

            
    
            
    
    
    
        
        
        
        
    
    

    
        
    


        
    
        
    

        
    
    
    
        1 回复  |  直到 7 年前
    
    

    
        
    

            
    
                
                
    

                    
                        
                    

                    

                    
                        
         1
    
                        
    

                        
    
                            
    
                                
  •   1
                            
    
                            
    
                                
  • 
                            
    
                        
    
                         
                        Geuis 
                         
                        7 年前


                        
    
                        
    
 
 
 
  
    
  
    
  
    c.drawImage(flag, i, 0, 1, flag.height, margin + i, y , 0.5, flag.height);

    
 

    
                        		
                
    
                    
            
    
        
    
    


    

        
    

        
    
    
    
        
        
        
        
    
    

    

        
    
        
    

    
    
        推荐文章
    
    

    


    

        
    
        
    
    
    
        
        
        
        
    
    

    

        
    
        
    
    
    
        
        
        
        
    
    

    

    
    



    
    

    
    
    
    

    


    
    
    
    
        
    
            
    

            
    
            
    

            
                关于
                 
                移动版

            

            
    
            代码之家 - 一站式码农服务社区

            
    
            
                沪ICP备11025650号