HTML Canvas - getContext() 方法

HTML Canvas 的 getContext() 方法用于获取/检索上下文对象。此方法接受一个字符串变量作为参数，指定所需的上下文。

如果失败，此方法将返回 NULL（如果指定的上下文不受支持）。此方法属于 HTMLCanvasElement 接口。我们不能根据方法提到的内容绘制不同上下文的图形。

语法

以下是 HTML Canvas getContext() 方法的语法：

HTMLCanvasElement.getContext(context_type);

参数

以下是此方法的参数：

序号	参数及描述
1	context_type 它接受一个包含 Canvas 元素上下文标识符的字符串。参数接受的值为： 2d webgl bitmaprenderer

示例

以下代码使用 HTML Canvas getContext() 方法将 Canvas 元素的上下文设置为 2D，并由窗口警报返回。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" height="300" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         window.alert("The selected context for the Canvas is - " + context);
      </script>
   </body>
</html>

输出

以上代码在网页上生成的画布为：

代码的窗口警报请求为：

示例

以下代码通过提供随机字符串设置 Canvas 元素的上下文，并且对象上下文由窗口警报返回。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('shapes');
         window.alert("The selected context for the Canvas is - " + context);
      </script>
   </body>
</html>

输出

以上代码在网页上生成的画布为：

代码的窗口警报请求为：

html_canvas_element.htm

打印页面