添加到 YouTube 的画布不可见

Question

我正在关注the WebGL tutorial from MDN（code、demo (black rectangle)）来创建一个 WebGL 画布。

目标是 YouTube 的用户脚本（带有 WebGL 着色器，即视频效果）。所以我打开了一个 YouTube 视频页面并将下面的代码（来自上面的链接）放入 JavaScript 控制台。画布已创建，但它是不可见的。

默认情况下，画布继承了 YouTube 的大量 CSS。我是否忽略了一些使其不可见的 CSS 属性？在这种情况下要注意什么？它应该是黑色的。

let container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement;
let canvas = document.createElement('canvas')
canvas.setAttribute('id', 'glcanvas')
canvas.setAttribute('width', '1000')
canvas.setAttribute('height', '1000')
container.appendChild(canvas)

// Initialize the GL context
const gl = canvas.getContext("webgl");

// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);

Answer 1

您的画布在那里，但不在顶部。设置一些额外的 CSS 用于定位。例如：

position: fixed;
z-index: 1000;