如何使用画布元素创建随时间推移的微光动画？

Question

因此，我知道大多数人不喜欢在文字后面加上奇怪的颜色，但是我的网站http://www.cbradiowaves.com应该看起来更像报纸。 无论如何，我正在使用canvas元素为背景创建渐变，并且加载速度非常快，但是我有一个很酷的想法，那就是如果我只能为canvas元素的输入创建一个循环，则可以使背景显得微弱设置。 我认为对于有经验的javascript程序员将有一个简单的解决方案。

这是我的代码：

<canvas id="background" width="1020" height="1020"
style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("background");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(100,100,100,90,800,850);
grd.addColorStop(0,"white");
grd.addColorStop(1,"silver");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,1020,1020);
</script>

创建动画需要随着时间增加的那一行是：

var grd = ctx.createRadialGradient(100,100,100,90,800,850);

我认为javascript可以使用某个功能来执行此操作，但是它在逃避我。

Answer 1

听起来好像您希望微光效果像慢镜头广角光晕效果一样。

这是如何做...

在动画循环内创建带有2个同心圆的径向渐变，并逐渐放大和缩小外部圆的动画。

效率低下的版本。

注意：这些演示最好在“整页”模式下查看。

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var offset=400; var direction=4; requestAnimationFrame(animate); function animate(time){ var grd = ctx.createRadialGradient(cw/2,ch/2,100,cw/2,ch/2,offset); grd.addColorStop(0,"white"); grd.addColorStop(1,"silver"); ctx.fillStyle=grd; ctx.fillRect(0,0,cw,ch); offset+=direction; if(offset<300 || offset>500){ direction*=-1; offset+=direction; } requestAnimationFrame(animate); } 

 body{ background-color:white; } #canvas{border:1px solid red; margin:0 auto; } 

 <canvas id="canvas" width=500 height=500></canvas> 

如果您有一点额外的内存，则是效率更高的版本：

如果有足够的内存，则可以使用径向渐变创建第二个内存中画布，并将第二个画布绘制图像到可见的画布上。 在动画循环中执行drawImage并缩放图形以创建闪烁的脉冲效果。

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var scale=100; var direction=1; var c=document.createElement('canvas'); var cctx=c.getContext('2d'); var ccw=cw*1.50; var cch=ch*1.50; c.width=ccw; c.height=cch; var grd = ctx.createRadialGradient(ccw/2,cch/2,100,ccw/2,cch/2,500); grd.addColorStop(0,"white"); grd.addColorStop(1,"silver"); cctx.fillStyle=grd; cctx.fillRect(0,0,ccw,cch); requestAnimationFrame(animate); function animate(time){ var iw=ccw*scale/100; var ih=cch*scale/100; ctx.drawImage(c, 0,0,ccw,cch, cw/2-iw/2,ch/2-ih/2,iw,ih ); scale+=direction; if(scale<75 || scale>125){ direction*=-1; scale+=direction; } requestAnimationFrame(animate); } 

 body{ background-color:white; } canvas{border:1px solid red; margin:0 auto; } 

 <canvas id="canvas" width=500 height=500></canvas> 

Answer 2

只需将渐变设置为元素的背景（不过我建议还是使用CSS渐变），然后在顶部用可变不透明度绘制一个白色正方形（在这里动画也可以使用CSS不透明度）。

这样，渐变仅渲染一次，不需要额外的画布缓冲区，浏览器将使用渐变进行主要合成。

调节速度和深度以适合您的需求（我曾尝试过微妙的老式电影闪光）-您还可以通过将帧速率切换为30 fps（默认为60 fps）来节省性能。

帆布

 var c = document.getElementById("background"), ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(100,100,100,90,800,850); grd.addColorStop(0,"white"); grd.addColorStop(1,"silver"); ctx.fillStyle = grd; ctx.fillRect(0,0,1020,1020); // Set as element background: c.style.backgroundImage = "url(" + c.toDataURL() + ")"; // element bg. ctx.fillStyle = "#fff"; // white fill // variate opacity (function loop(time) { ctx.clearRect(0, 0, c.width, c.height); // clear frame ctx.globalAlpha = Math.abs(Math.sin(time * 0.008)) * 0.15 + 0.2; // set some opacity/time ctx.fillRect(0, 0, c.width, c.height); // fill white requestAnimationFrame(loop) })(0); 

 <canvas id="background" width="1020" height="1020"></canvas> 

要考虑的CSS版本：

这里只是一个简单的椭圆渐变，请根据需要进行调整：

 html, body, #background {width:100%; height:100%; margin:0} #background { position:fixed; z-index:-1; /* note: you may need to add more prefixed version */ background: -webkit-radial-gradient(center, ellipse cover, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 2%,rgba(224,224,224,1) 100%); background: radial-gradient(ellipse at center, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 2%,rgba(224,224,224,1) 100%); -webkit-animation: 0.2s shimmer linear infinite alternate; animation: 0.20s shimmer linear infinite alternate; } @keyframes shimmer {from {opacity:0.8} to {opacity:1}} @-webkit-keyframes shimmer {from {opacity:0.8} to {opacity:1}} 

 <div id="background"></div>