HTML Canvas - 画布属性

Canvas API 的 HTML Canvas 属性是 Canvas 上下文对象的引用。它帮助我们定义 canvas 标签并使用它来使用 canvas 对象开发图形。这是通过使用 JavaScript 代码实现的。

可能的输入值

它获取 canvas 标签和提供的代码片段，并构造一个具有指定尺寸和给定样式的新 Canvas 元素对象。

可以使用此上下文提供给 Canvas 元素，并可以使用可用方法和属性渲染图形。

示例

以下示例演示如何使用 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" width="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         console.log(context.canvas);
      </script>
   </body>
</html>

输出

上述代码在网页控制台中返回的输出为：

在网页上看到的输出为：

示例

以下示例演示如何使用 canvas 属性生成新的上下文对象，并通过增加大小和添加颜色来设置边框样式。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
         #canvas {
            border: 10px solid green;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" height="200" width="200"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出为：

示例

以下示例演示如何使用 canvas 属性生成新的上下文对象并填充背景。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }

         #canvas {
            background-color: aqua;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出为：

示例

以下示例演示如何使用 canvas 属性生成新的上下文对象并使用 CSS 样式设置边框样式。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }

         #canvas {
            border: 50px groove grey;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出为：

html_canvas_element.htm

打印页面