HTML Canvas moveto() 方法

在 HTML5 中，我们可以使用 Canvas 元素来绘制图形、动画等内容。其中，moveto() 方法是 Canvas 上下文对象的一个重要方法，用于设置绘图起点的位置。

语法

context.moveTo(x, y)

• x: 绘图起点的 x 坐标
• y: 绘图起点的 y 坐标

参数

moveto() 方法接受两个参数，分别是绘图起点的 x 和 y 坐标。这两个参数分别表示 Canvas 上的水平位置和垂直位置。

返回值

moveto() 方法没有返回值。

示例

下面是一个简单的示例，演示了如何使用 moveto() 方法设置绘图起点的位置：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Canvas moveto() 方法示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 设置绘图起点的位置
        ctx.moveTo(50, 50);

        // 绘制一个矩形
        ctx.rect(50, 50, 100, 50);
        ctx.stroke();
    </script>
</body>
</html>

在上面的示例中，我们首先获取了 Canvas 元素和上下文对象，然后使用 moveto() 方法设置绘图起点的位置为 (50, 50)，最后绘制了一个矩形。

注意事项

• 在调用 moveto() 方法之后，如果需要绘制线条或填充图形，需要使用 lineTo() 方法或其他绘制路径的方法来连接起点和终点。
• moveto() 方法只是设置绘图起点的位置，并不会绘制任何内容。

通过学习 moveto() 方法的使用，你可以更加灵活地控制 Canvas 上的绘图过程，实现更加丰富多彩的效果。祝你在前端开发的道路上越走越远！