在JavaScript中，ctx（即“上下文”）指的是當前函數執行時的運行環境。它包含了所有當前函數所需的變量、對象以及方法，是實現函數調用的關鍵之一。在一些處理數據的函數中，例如Canvas繪圖和WebGL等，ctx非常重要。 例如，在Canvas中使用ctx繪制一個矩形： ```javascript const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') ctx.fillRect(10, 10, 50, 50) ``` 在這個例子中，我們通過canvas元素獲取ctx，并使用ctx的fillRect方法在canvas上繪制了一個矩形。在這個例子中，ctx提供了繪圖函數所需的所有變量和方法。 對于WebGL來說，ctx更加重要。WebGL是一種基于OpenGL的3D繪圖庫，在Web上渲染3D圖形需要使用WebGL。在WebGL中，我們可以使用ctx來設置著色器程序和紋理等。 例如，在WebGL中，我們可以通過如下代碼片段設置著色器程序： ```javascript const gl = canvas.getContext('webgl') const shaderProgram = gl.createProgram() const vertexShader = gl.createShader(gl.VERTEX_SHADER) gl.shaderSource(vertexShader, ` attribute vec4 a_Position; void main() { gl_Position = a_Position; } `) gl.compileShader(vertexShader) gl.attachShader(shaderProgram, vertexShader) const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(fragmentShader, ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `) gl.compileShader(fragmentShader) gl.attachShader(shaderProgram, fragmentShader) gl.linkProgram(shaderProgram) gl.useProgram(shaderProgram) const attributes = gl.getAttribLocation(shaderProgram, 'a_Position') gl.vertexAttribPointer(attributes, 2, gl.FLOAT, false, 0, 0) gl.enableVertexAttribArray(attributes) ``` 在這個例子中，我們通過創建shaderProgram獲取了一個WebGL程序，使用createShader創建了兩個著色器，并分別為其設置了源代碼。然后我們編譯了著色器，并將其附加到了shaderProgram上。最后，我們在使用程序前啟用了a_Position屬性并通過getAttribLocation獲取了屬性的位置。 通過以上的示例，我們可以看到在WebGL中，ctx提供了幾乎所有我們需要使用的函數和變量，使得我們能夠輕松地將3D應用程序渲染出來。 除了以上兩個示例，我們還可以在其他地方看到ctx的身影。例如在React中，我們可以通過this.ctx獲取當前組件運行時的上下文信息，有了ctx，我們可以輕松地對應用程序進行配置和調試。 總之，ctx是JavaScript開發中一個非常重要的概念。它為我們提供了當前函數執行時的上下文環境，使得我們可以方便地使用變量和方法。