HTML canvas moveTo()用法及代碼示例

畫布 moveTo() 方法用於將路徑移動到畫布中的指定點，而不是創建一條線。調用 moveTo() 方法後，我們可以使用 stroke() 方法在畫布上繪製路徑。

用法:

context.moveTo( x, y );

參數：該函數接受上述和以下所述的兩個參數：

x:此參數指定點的 x 軸(水平)坐標。
y:此參數指定點的 y 軸(垂直)坐標。

程序1:


<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas moveTo() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h2>HTML canvas moveTo() Method</h2>
      
    <canvas id="GFG" width="500" height="300" >
    </canvas>
      
    <script>
        var id_cont = document.getElementById("GFG");
        var context = id_cont.getContext("2d");
        context.moveTo(50, 50);
        context.lineTo(450, 50);
        context.strokeStyle="green";
        context.stroke();
    </script>
</body>
  
</html>

輸出：

程序2:


<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas moveTo() Method
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h2>HTML canvas moveTo() Method</h2>
      
    <canvas id="GFG" width="500" height="300" >
    </canvas>
      
    <script>
        var id_cont = document.getElementById("GFG");
        var context = id_cont.getContext("2d");
          
        // Begin the second sub-path
        context.moveTo(130, 80);   
        context.lineTo(350, 80);
          
        // Begin the second sub-path
        context.moveTo(130, 30);   
        context.lineTo(350, 30);
        context.strokeStyle="green";
        context.stroke();
    </script>
</body>
  
</html>

輸出：

支持的瀏覽器：HTML canvas moveTo() 方法支持的瀏覽器如下：

穀歌瀏覽器
Internet Explorer 9.0
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自IshwarGupta大神的英文原創作品 HTML | canvas moveTo() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。