window.requestAnimFrame

window.requestAnimFrame是一个在浏览器中用于动画的方法。它用于请求浏览器在下一帧绘制之前调用指定的回调函数。它的作用是为了实现更加平滑的动画效果。通过使用window.requestAnimFrame，可以让动画的执行与浏览器本身的帧速率保持同步，从而获得更好的用户体验。

如果需要取消一个之前通过window.requestAnimFrame添加的动画帧请求，可以使用window.cancelAnimationFrame方法。这个方法接受一个参数，即之前调用window.requestAnimFrame返回的请求ID。通过传入这个请求ID，可以告诉浏览器不再执行对应的回调函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

export default function canvasBg(){ window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById('canvas'); var $ = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var _w = w * 0.5; var _h = h * 0.5; var arr = []; var cnt = 0; window.addEventListener('load', resize); window.addEventListener('resize', resize, false); function resize() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; c.style.position = 'absolute'; c.style.left = (window.innerWidth - w) * .01 + 'px'; c.style.top = (window.innerHeight - h) * .01 + 'px'; } function anim() { cnt++; if (cnt % 6) draw(); window.requestAnimFrame(anim); } anim(); function draw() { var splot = { x: rng(_w - 900, _w + 900), y: rng(_h - 900, _h + 900), r: rng(20, 80), spX: rng(-1, 1), spY: rng(-1, 1) }; arr.push(splot); while (arr.length > 100) { arr.shift(); } $.clearRect(0, 0, w, h); for (var i = 0; i < arr.length; i++) { splot = arr[i];; $.fillStyle = rndCol(); $.beginPath(); $.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true); $.shadowBlur = 80; $.shadowOffsetX = 2; $.shadowOffsetY = 2; $.shadowColor = rndCol(); $.globalCompositeOperation = 'lighter'; $.fill(); splot.x = splot.x + splot.spX; splot.y = splot.y + splot.spY; splot.r = splot.r * 0.96; } } function rndCol() { var r = Math.floor(Math.random() * 180); var g = Math.floor(Math.random() * 60); var b = Math.floor(Math.random() * 100); return "rgb(" + r + "," + g + "," + b + ")"; } function rng(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } }

这是一个用 JavaScript 实现的 canvas 背景效果，它会在 canvas 元素上绘制一些圆形的粒子，并给这些粒子添加阴影和颜色渐变，形成一个动态的背景效果。具体实现方式是通过 setInterval() 方法不断调用 draw() 函数来更新画布。在 anim() 函数中通过 requestAnimationFrame() 方法来循环调用 draw() 函数，以达到动态更新的效果。resize() 函数会在页面大小发生改变时调用，重新设置 canvas 元素的宽高和位置。rng() 函数用来生成一个指定范围内的随机数，rndCol() 函数用来生成一个随机的颜色值。

window.opener

window.opener 是 JavaScript 中的一个属性，表示打开当前窗口的窗口对象。当一个窗口通过 window.open() 方法打开另一个窗口时，被打开的窗口可以通过 window.opener 属性访问到打开它的窗口对象。这个属性通常用于在子窗口中与父窗口进行通信。

通过 window.opener，你可以使用 JavaScript 在子窗口中调用父窗口的方法、访问父窗口的属性或者向父窗口传递数据。这种机制可以实现一些有趣的功能，比如子窗口可以通过调用父窗口的方法来改变父窗口的内容或者关闭父窗口。

需要注意的是，window.opener 只在通过 window.open() 方法打开的窗口中才会有值，如果当前窗口不是通过 window.open() 方法打开的，那么 window.opener 的值为 null。此外，由于安全原因，跨域的窗口之间无法直接访问对方的 window.opener 属性。