主页 / 问题 / 1608839
Accepted
Maksim
Asked:2025-03-17 23:35:25 +0800 CST2025-03-17 23:35:25 +0800 CST

是否可以使用 canvas.getContext() 在代码中多次更改画布上下文？

  • 772

我有类似这样的代码

const canvas1 = document.getElementById('canvas-1');
const canvas2 = document.getElementById('canvas-2');

const createContext = () => {
    let ctx1, ctx2;
    if (document.querySelector('#gpu').checked) {
        console.log('gpu');
        ctx1 = canvas1.getContext('2d', { willReadFrequently: false });
        ctx2 = canvas2.getContext('2d', { willReadFrequently: false });
    } else {
        console.log('cpu');
        ctx1 = canvas1.getContext('2d', { willReadFrequently: true });
        ctx2 = canvas2.getContext('2d', { willReadFrequently: true });
    }

    return [ctx1, ctx2];
};

let [ctx1, ctx2] = createContext();

<label for="gpu">gpu processing</label>
<input type="checkbox" id="gpu" ><br>

问题是，当调用该函数时上下文不会改变createContext()，通过调试器判断，所有步骤都已完成，但是，尽管如此，当您单击复选框时上下文不会改变。

在后台，按钮调用了几个函数，包括创建上下文。

问题是，是否有可能CanvasRenderingContext2D在开发过程中更改代码，还是一劳永逸地创建代码？第二种情况，是否可以改变willReadFrequently上下文？

javascript

1 个回答

  1. Best Answer

    是否有可能在期间更改CanvasRenderingContext2D代码？

    对于第一个问题，文档中明确指出，如果上下文类型相同，则返回相同的上下文。

    HTMLCanvasElement：getContext() 方法

    该方法HTMLCanvasElement.getContext()返回画布上的绘图上下文，或者null如果上下文标识符不受支持或画布已设置为不同的上下文模式。

    对同一个画布元素使用相同参数后续调用此方法contextType将始终返回与第一次调用该方法时返回的相同的绘图上下文实例。无法在此画布上获取另一个绘图上下文对象。

    是否可以改变willReadFrequently上下文？

    至于第二个问题，

    willReadFrequently：

    一个布尔值，指示是否安排了许多读回操作。这将强制使用软件（而不是硬件加速）2D画布，并且可以在频繁调用时节省内存getImageData()。

    被设置为函数参数，也就是说，它可以被改变，但是如果你已经使用该上下文进行绘图，那么这样做真的没有意义。

    例如：

    const ctx = canvas.getContext("2d", { willReadFrequently: true });
if (!ctx) {
   throw new Error("ctx undefined");
}

    返回编程绘图的上下文。

    该属性只能设置一次，即第一次getContext()。再次调用时，会发出警告并忽略设置的值。

    • 0

相关问题