WebGLRenderingContext: scissor() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

注意:此功能在 Web Workers 中可用。

WebGLRenderingContext.scissor() 方法是 WebGL API 的一部分,用於設定一個剪裁框,將繪製限制在一個指定的矩形區域內。

語法

js
scissor(x, y, width, height)

引數

x

一個 GLint,指定剪裁框左下角的水平座標。預設值為:0。

y

一個 GLint,指定剪裁框左下角的垂直座標。預設值為:0。

width

一個非負的 GLsizei,指定剪裁框的寬度。預設值為:畫布的寬度。

height

一個非負的 GLsizei,指定剪裁框的高度。預設值為:畫布的高度。

返回值

無(undefined)。

異常

如果 widthheight 中的任何一個值為負數,則會丟擲 gl.INVALID_VALUE 錯誤。

示例

當啟用剪裁測試時,只有剪裁框內的畫素才能被繪圖命令修改。

js
// turn on scissor test
gl.enable(gl.SCISSOR_TEST);

// set the scissor rectangle
gl.scissor(x, y, width, height);

// execute drawing commands in the scissor box (e.g. clear)

// turn off scissor test again
gl.disable(gl.SCISSOR_TEST);

要獲取當前的剪裁框尺寸,請查詢 SCISSOR_BOX 常量,它會返回一個 Int32Array

js
gl.scissor(0, 0, 200, 200);
gl.getParameter(gl.SCISSOR_BOX);
// Int32Array[0, 0, 200, 200]

規範

規範
WebGL 規範
# 5.14.4

瀏覽器相容性

另見