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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。