Question

我遇到的问题是 context.beginPath（）和 context.closePath（）。下面的代码将在屏幕周围绘制一个圆弧，直到它消失，然后是一个小点，我会注释掉，因为它是一个我不知道如何包含的.jpg。

我的问题是beginPath（）究竟做了什么以及closePath（）做了什么？

如果我发表评论，除了我所期待的结果之外，我得到了一个疯狂的结果。我在互联网上看过，但我还没有看到这样的结果。

带问题的代码：

function drawTheBall() {
    context.fillStyle = "#00AB0F"; //sets the color of the ball
    context.beginPath();
        context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
    context.closePath();
    context.fill();
}

下面的工作代码

HTML JavaScript的

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In Simple Geometric Spiral </title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {
    canvasApp();
}

function canvasSupport () {
    return Modernizr.canvas;
}

function canvasApp() {
    var radiusInc = 2;
    var circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}
    var ball = {x:0, y:0,speed:.1};
    var points = new Array();

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    var pointImage = new Image();
    pointImage.src = "point.png";   <-- Comment this line out

    if (!canvasSupport()) {
        return;
    }

  function erraseCanvas() {
     context.clearRect(0,0,theCanvas.width,theCanvas.height);
  }

  function drawPathPoints() {
    //Draw points to illustrate path
    points.push({x:ball.x,y:ball.y});
    for (var i= 0; i< points.length; i++) {
        context.drawImage(pointImage, points[i].x, points[i].y,1,1);
    }
  }

  function drawTheBall() {
    context.fillStyle = "#00AB0F"; //sets the color of the ball
    context.beginPath();
        context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
    context.closePath();
    context.fill();
  }

  function buildBall() {
    ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
    ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
    circle.angle += ball.speed;
    circle.radius += radiusInc; 
  }

  function  drawScreen () {
    erraseCanvas();
    buildBall();
    drawPathPoints();
    drawTheBall();
  }

    function gameLoop() {
        window.setTimeout(gameLoop, 20);
        drawScreen()    
    }

    gameLoop();
}


</script>

</head>
<body>  
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>

</body>
</html>

Answer 1

`beginPath()`

beginPath()清除当前内部路径对象及其子路径，这些路径会累积路径操作，如line，rect，arc，arcTo等，无论它们是否被填充或描边。

`closePath()`

closePath()将当前路径或子路径的位置与使用beginPath()或moveTo()创建的路径上的第一个点相关联，如果是用过的。后者在当前主路径上创建一个子路径only this sub-path gets closed。

有些方法为closePath()和fill()隐式和临时执行clip()，这意味着这些调用不需要它。在任何情况下，必须在之前调用 stroke()（或fill()，如果您选择使用它）。

如果人们将其视为＆＃34;关闭循环＆＃34; 而不是结束或关闭它没有的路径[对象]，那么人们可以更好地理解这种方法。

Answer 2

BeginPath将启动一个新路径，与moveTo不同，后者将开始一个新的子路径

关闭路径将关闭路径。它可能是不需要的，除非你想要抚摸整个路径而没有间隙

关闭路径：

//An Open Box
ctx.moveTo(0  ,   0);
ctx.lineTo(0  , 100);
ctx.lineTo(100, 100);
ctx.lineTo(100,   0);
ctx.stroke();

ctx.translate(150, 0);

//A closed box
ctx.moveTo(0  ,   0);
ctx.lineTo(0  , 100);
ctx.lineTo(100, 100);
ctx.lineTo(100,   0);
ctx.closePath();
ctx.stroke();

beginPath（）和closePath（）究竟做了什么？

2 个答案:

`beginPath()`

`closePath()`