HTML 畫布 - scrollPathIntoView() 方法

HTML 畫布 scrollPathIntoView() 方法採用 CanvasRenderingContext2D 介面上下文物件並滾動所給路徑以使其可見。

語法

以下是 HTML 畫布 scrollPathIntoView() 方法的語法 −

CanvasRenderingContext2D.scrollPathIntoView(cur_path);

引數

以下是此方法的引數列表 −

序列號	引數和說明
1	cur_path 將應用該方法的路徑。

返回值

當向 CanvasRenderingContext2D 介面上下文物件應用以下方法時，該物件的路徑在檢視中可用。

示例 1

以下示例展示 HTML 畫布 scrollPathIntoView() 方法如何在畫布元素內使用。

<!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.beginPath();
         context.moveTo(100, 50);
         context.lineTo(50, 100);
         context.lineTo(150, 100);
         context.lineTo(100, 50);
         context.fillStyle = 'brown';
         context.fill();
         context.closePath();
         context.strokeRect(30, 30, 150, 100);
         context.scrollPathIntoView();
      }
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為 −

示例 2

以下示例展示當 scrollPathIntoView() 方法繪製的形狀邊界比原始畫布元素大時，如何隱藏畫布元素中繪製的形狀。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      // remove the below line to observe the difference
      context.scrollPathIntoView();
      context.strokeRect(30, 30, 350, 200);
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為 −

html_canvas_paths.htm

列印頁面

上一個

下一個