如何知道畫布是普通畫布還是webgl畫布

Question

如何知道畫布是運行「WebGL」還是普通畫布？

從檢查源，我覺得在這兩種情況下畫布...

的stackover流似乎不讓我提交的問題，除非它足夠長，所以這一段是隻是爲了滿足計算器傢伙。

Answer 1

如果你做canvas.getContext('2d')並且它返回null它不是2d上下文，對於其他上下文類型也是如此。另一方面，如果上下文尚未創建，它將創建上下文。

Answer 2

畫布不會運行任何東西 - 在這兩種情況下，它只是一個帶有可修改位圖的元素。它本身不能告訴它被用於什麼。

帆布可以爲您提供上下文雖然它可以是。如果你因爲某些原因正在請求的情況下是不能在源代碼，看看你隨時可以測試的背景（有點落後，但在這裏不用）：

if (ctx === null) { 
    return 'unsupported'; 
} 
else if (typeof ctx.viewport === 'undefined' && // test some existing non-shared 
     typeof ctx.arc !== 'undefined') {  // method names 
    return '2d'; 
} 
else if (typeof ctx.viewport !== 'undefined' && 
     typeof ctx.arc === 'undefined') { 
    return 'webgl'; 
} 
else { 
    return 'unknown'; 
} 

測試爲WebGLRenderingContext不會爲幫助這個測試支持在瀏覽器。即使瀏覽器支持WebGL，也不會得到WebGL上下文，因爲這取決於計算機及其硬件功能。

Answer 3

這真的取決於你想如何去尋找。

例如，你可以調用`的getContext」這樣

if (someCanvas.getContext("2d")) { 
    // It's a 2D canvas 
} else if (someCanvas.getContext("experimental-webgl") || 
      someCanvas.getContext("webgl")) { 
    // It's a WebGL canvas 
} 

不幸的是，也將使得畫布2D畫布，如果沒有人以前稱爲getContext。

另一種選擇是，你可以換的getContext像這樣

(function() { 

    var originalGetContextFunction = HTMLCanvasElement.prototype.getContext; 

    HTMLCanvasElement.prototype.getContext = function() { 
    var type = arguments[0]; 
    var ctx = originalGetContextFunction.apply(this, arguments); 
    if (ctx && !this.canvasType) { 
     this.canvasType = type; 
    } 
    return ctx; 
    }; 

}()); 

現在對於任何畫布，您可以檢查someCanvas.canvasType找出字符串傳遞到getContext。例如：

var c1 = document.createElement("canvas"); 
var c2 = document.createElement("canvas"); 
var ctx = c1.getContext("2d"); 
var gl = c2.getContext("experimental-webgl"); 
alert("c1 is " + c1.canvasType + ", c2 is " + c2.canvasType); 

只要確保在創建畫布的代碼之前包含包裝器。