在HTML5画布中设置动画后，图像变暗
在HTML5画布中设置动画后，图像变暗
提问于 2018-07-18 03:11:41
问题
我想在动画之后恢复图像的原始亮度。我该怎么办？
描述
在下面的代码中，我以条带的形式绘制了图像。每个条带沿垂直轴移动一定的量(类似于水波模拟，从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
Stack Overflow用户
回答已采纳
发布于 2018-07-18 03:52:52
将此行中的0.5更改为1：
c.drawImage(flag, i, 0, 1, flag.height, margin + i, y , 0.5, flag.height);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51388679
复制相关文章
相似问题