HTML5畫布上下文

我已經開始閱讀/試驗HTML5。我已經看到了HTML5的Canvas的所有教程遵循的JavaScript獲得通過ID畫布，讓2D背景，然後與上下文工作模式：HTML5畫布上下文

<canvas id="myCanvas" width="300" height="200" style="border:1px solid"></canvas> 
<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.fillStyle="cyan"; 
    ctx.fillRect(50,50,100,75); 
</script>

我想知道是否有任何枚舉或爲畫布獲取上下文的常量。（我知道這不是一個真正的常量，只是想知道在JavaScript或HTML5中是否有類似的東西）。

我見過的每個例子都是簡單的getContext("2d")。這看起來很脆弱，也沒有告訴我可能有哪些其他（如果有的話）上下文。

來源

2013-01-18 Philip Tenn

我認爲現在只是'2d'或'webgl'。 – paul

@paul感謝您通知我關於webgl ......我不知道這是可以傳遞的字符串之一。我認爲這將是'3d'。 –

您只需要調用getContext一次，如果再次調用它，如果畫布已經使用不同的上下文類型初始化，它將返回null。如果使用相同的上下文類型再次調用它，它將返回相同的上下文。如果畫布不支持給定的上下文ID字符串，則也會返回空值。

換句話說，每個畫布只有一個上下文。

不告訴我可能有哪些其他（如果有）上下文。

爲此，有一個方法supportsContext(someContextString)，這是非常新的規範（2012年3月），尚未在任何瀏覽器中實現。

還有另外的setContext還沒有在任何瀏覽器支持（可能在幾晚）。請注意，setContext僅在您創建了無頭環境時纔有用，因爲如果您嘗試設置不同的環境，則已經具有上下文（通過使用getContext）的畫布將引發錯誤。

無論如何，參數是一個字符串的原因是允許瀏覽器特定的畫布擴展。畢竟，MS可能想要實施getContext('2d-directx')（他們可能永遠不會這樣做）。

這幾天你會看到的唯一字符串是"2d"，"webgl"和"webgl-experimental"。

來源

2013-01-18 20:49:50

這是一個非常豐富的答案，謝謝你分享所有偉大的信息。我從來沒有聽說過'supportsContext'方法或尚未支持的setContext。 –

HTML5畫布上下文

回答

相關問題