我正在尝试用纯文字和画布编写游戏引擎。
今天我有一个奇怪的事情，同时与
var circle = new Circle(10, 10, 100);
如果我从代码
beginPath()和closePath()中删除了它，圆形就很奇怪，并且可以正常工作，但是由于以下原因，屏幕无法重绘：http://codetheory.in/why-clearrect-might-not-be-clearing-canvas-pixels/可以在这里找到“引擎”代码：insane96mcp.altervista.org/Invaders/script.js
最佳答案
我无法通过链接中的代码重现您的怪圈，但是...
1.您似乎对beginPath和endPath有误解beginPath开始新路径，并停止绘制先前的路径。有必要防止您的图形堆积和覆盖自己。如果没有beginPath，则每次调用yourCircle.Draw时，您的圈子都会自行重绘（＆redraw＆redraw＆redraw！）。如果省略beginPath，则这种不断重绘可能会引起怪异的圆。closePath不是beginPath的对应部分。它不会停止绘制路径。相反，它仅用一条线将当前路径位置连接到起始路径位置。如果没有beginPath，则closePath创建的这些多余的行可能是造成锯齿状圆的原因。
下面为您提供一些阅读资料（context.beginPath和context.closePath）
2.您不必要在Shape的gameObjects中添加“空” function Shape对象。
3. ...是的，当您对问题进行猜测时，如果不使用clearRect清除绘制之间的画布，则会累积您的图形。但是人们会希望这个圆更加均匀模糊而不是锯齿状。
context.beginPath
context.beginPath()
开始组装一组新的路径命令，也丢弃任何先前组装的路径。
还将图形“笔”移动到画布的左上角原点（== coordinate [0,0]）。
尽管是可选的，但您应始终使用
beginPath开头路径丢弃是一个重要且经常被忽视的问题。如果您不使用
beginPath开始新路径，则以前发出的所有路径命令都会自动重绘。这两个演示都试图用一个红色描边和一个蓝色描边绘制一个“ X”。
第一个演示正确使用
beginPath来启动第二个红色笔触。结果是“ X”正确地具有红色和蓝色笔划。<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// get a reference to the canvas element and it's context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// draw a blue line
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(100,100);
ctx.strokeStyle='blue';
ctx.lineWidth=3;
ctx.stroke();
// draw a red line
ctx.beginPath(); // Important to begin a new path!
ctx.moveTo(100,30);
ctx.lineTo(30,100);
ctx.strokeStyle='red';
ctx.lineWidth=3;
ctx.stroke();
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=200 height=150></canvas>
</body>
</html>
此第二个演示错误地在第二个笔划中遗漏了
beginPath。结果是“ X”错误地同时具有两个红色笔触。第二个
stroke()绘制第二个红色笔画。但是如果没有第二个
beginPath，则同一第二个stroke()也会错误地重画第一个笔划。由于第二个
stroke()现在被设置为红色，因此第一个蓝色笔画将被错误地着色的红色笔画覆盖。<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// get a reference to the canvas element and it's context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// draw a blue line
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(100,100);
ctx.strokeStyle='blue';
ctx.lineWidth=3;
ctx.stroke();
// draw a red line
// Note: The necessary 'beginPath' is missing!
ctx.moveTo(100,30);
ctx.lineTo(30,100);
ctx.strokeStyle='red';
ctx.lineWidth=3;
ctx.stroke();
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=200 height=150></canvas>
</body>
</html>
context.closePath
context.closePath()
从当前笔的位置绘制一条线回到起始路径坐标。
例如，如果您绘制2条线以形成一个三角形的2条腿，closePath将通过从第二条腿的端点向第一条腿的起点绘制三角形的第三条腿来“闭合”该三角形。
误解解释了！
该命令的名称通常会引起误解。
context.closePath不是context.beginPath的结尾定界符。再次，closePath命令画一条线-它不会“关闭” beginPath。
本示例绘制了一条三角形的两条腿，并使用
closePath通过绘制第三条腿来完成（闭合？！）三角形。 closePath实际在做的是从第二条腿的端点到第一条腿的起点画一条线。<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// get a reference to the canvas element and it's context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// arguments
var topVertexX=50;
var topVertexY=50;
var rightVertexX=75;
var rightVertexY=75;
var leftVertexX=25;
var leftVertexY=75;
// A set of line segments drawn to form a triangle using
// "moveTo" and multiple "lineTo" commands
ctx.beginPath();
ctx.moveTo(topVertexX,topVertexY);
ctx.lineTo(rightVertexX,rightVertexY);
ctx.lineTo(leftVertexX,leftVertexY);
// closePath draws the 3rd leg of the triangle
ctx.closePath()
ctx.stroke();
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=200 height=150></canvas>
</body>
</html>
关于javascript - 带有开始路径的Context2d arc()，生成奇怪的圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39181597/