canvasbeginpath方法

canvas.beginPath()方法用于开始新的路径绘制。在HTML5的Canvas画布中，路径是由一系列的直线、弧线、贝塞尔曲线等组成的，通过将这些路径连接起来可以绘制出各种形状和图案。

使用canvas.beginPath()方法标志着开始一个新的路径绘制过程，之前绘制的路径将被清除，当前的画笔位置将移动到原点(0

0)。这意味着从调用canvas.beginPath()方法开始，将不再绘制之前的路径。

在实际应用中，通常会在调用canvas.beginPath()方法之后紧接着调用其他路径绘制方法，比如lineTo()、arcTo()、quadraticCurveTo()等，来构建要绘制的图形。*通过调用canvas.stroke()或canvas.fill()方法来完成路径的绘制。

```javascript

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

// 开始新的路径

ctx.beginPath();

// 绘制矩形

ctx.rect(20

20

150

100);

// 绘制圆形

ctx.arc(100

100

50

0

2 * Math.PI);

// 设置线条颜色

ctx.strokeStyle = "red";

// 绘制路径

ctx.stroke();

```

在上面的例子中，使用canvas.beginPath()方法开始了一个新的路径绘制过程，然后通过调用rect()方法绘制了一个矩形，再调用arc()方法绘制了一个圆形，并最终调用stroke()方法完成路径的绘制。

需要注意的是，每次调用canvas.beginPath()方法都会开始一个新的路径，因此在绘制多个不同图形时需要确保在绘制每个图形前调用canvas.beginPath()方法。

总之，canvas.beginPath()方法是Canvas中非常重要的一个路径绘制方法，它标志着开始新的路径绘制过程，是构建绘制图形的*步。当我们需要在Canvas画布上绘制多个不同的图形时，必须使用canvas.beginPath()来清除之前的路径，并开始新的绘制过程。