无法调用 null 的方法“drawImage”

Question

我正在尝试在画布背面添加视频作为背景。问题是它不断给出这个错误不能调用null的方法'drawImage'。请帮忙

    renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    canvas = document.querySelector("canvas");
    videoContext = canvas.getContext( '2d' );
    document.addEventListener('mousemove', onDocumentMouseMove, false);

然后我在发生错误的代码下方有一个函数

function render() {

    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (-mouseY - camera.position.y) * .05;

    camera.lookAt(scene.position);


    if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
videoContext.drawImage( video, 0, 0 );           
    }
      renderer.render(scene, camera);
}

videoContext 始终保持为空

Answer 1

不可能有来自同一个画布的 webgl 和 2d 上下文。