HTML Canvas - getContextAttributes() 方法



HTML Canvas 的getContextAttributes() 方法是 Canvas API 的一部分,它返回一个包含相同上下文参数的 Canvas 对象。

这些属性通常在上下文创建时由getContext() 方法请求。它通常在使用其对象请求时返回在画布元素内绘制的任何图形的上下文。

语法

以下是 HTML Canvas getContextAttributes() 方法的语法

CanvasRenderingContext2D.getContextAttributes();

参数

因为它只是一个返回方法,所以它不接受任何参数。

返回值

CanvasRenderingContext2D 接口方法使用上下文对象,并且当 HTML Canvas getContextAttributes() 方法被对象使用时,对象参数通过控制台或窗口警报返回。

示例

以下示例使用 HTML Canvas getContextAttributes() 方法在控制台中返回画布元素的上下文参数。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            console.log(context.getContextAttributes());
         }
      </script>
   </body>
</html>

输出

该方法在网页上返回的输出为:

HTML Canvas getContextAttributes() Method

在控制台屏幕上可以看到的输出为:

HTML Canvas getContextAttributes() Method

示例

以下示例在控制台中返回画布元素内填充矩形的上下文参数。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillRect(10, 10, 150, 100);
            console.log(context.getContextAttributes());
         }
      </script>
   </body>
</html>

输出

该方法在网页上返回的输出为:

HTML Canvas getContextAttributes() Method

在控制台屏幕上可以看到的输出为:

HTML Canvas getContextAttributes() Method
html_canvas_rectangles.htm
广告