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

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

canvas image html5 javascript

vrintle Jake · 技术社区 · 6 年前

问题

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

说明

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

代码

{ //设置 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> 动画前的图像动画时的图像事先谢谢!

1 回复 | 直到 6 年前

Geuis 6 年前

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