beginPath（）和closePath（）是做什么？ [英] What does beginPath() and closePath() do exactly?
问题描述
我有的问题是使用 context.beginPath（）和 context.closePath（）。下面的代码将在屏幕上画一个圆弧，直到它消失，然后是一个小点，我会注释掉，因为它是一个.jpg，我不知道如何包括。
The question that I have is with context.beginPath() and context.closePath(). The code below will draw a circle in an arc around the screen until it disappears followed by a small dot which I would comment out because it is a .jpg which I do not know how to include.
我的问题是beginPath（）做什么和closePath（）做？
My question is exactly what does the beginPath() do and also the closePath() do?
如果我注释掉它们，除了我所期望的。我已在互联网上查看，但我还没有看到像这样的结果。
If I comment them out I get a wild result other than what I am expecting. I have looked on the internet but I have not seen the results like this.
代码与一个问题：
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
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>
推荐答案
code>
beginPath（）清除累积路径操作的当前内部路径对象， rect，arc，arcTo等。
beginPath()
beginPath() clears the current internal path object which accumulates path operations such as line, rect, arc, arcTo and so on.
它也设置路径从左上角[0,0]开始。
It also sets the path start to upper left corner [0, 0].
c>将当前路径位置与使用 beginPath（）或 moveTo（）创建的第一个路径位置
closePath() connects the current path position with the first one either created with beginPath() or moveTo() if that was used.
它还将下一个起点设置为当前终点，因此如果继续添加路径，起点将是上一个终点（除非您使用 moveTo（）之间）。
It also set the next start point to the current end point so if you continue to add paths the start point will be the previous end point (unless you use moveTo() in between).
一些方法做一个 closePath c $ c>隐含和临时的，如 fill（）和 clip（）这意味着它不需要这些调用。
Some methods do a closePath() implicit and temporary for you such as fill() and clip() which means it's not needed for those calls.
如果将它想象为关闭循环，而不是结束它的路径，
One can probably understand this method better if one think of it as "closing the loop" rather than ending the path which it doesn't.
这篇关于beginPath（）和closePath（）是做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
