Question

我正在尝试用纯javscript和canvas编写游戏引擎。今天我有一个奇怪的事情，用

生成一个圆圈

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

Answer 1

我无法从链接中的代码重现您的奇怪圈子，但是......

<强> 1。您似乎对beginPath＆amp; endPath

beginPath启动新路径并停止绘制上一个路径。有必要防止您的图纸累积和覆盖自己。如果没有beginPath，您的圈子会在每次调用yourCircle.Draw时重绘（并重绘和重绘＆重绘！）本身。 如果你遗漏beginPath，这种不断的重绘可能会导致你的怪圈。

closePath 不是beginPath的反对部分。它不会停止绘制路径。相反，它只是用一条线将当前路径位置连接到起始路径位置。 如果没有beginPath，closePath创建的这些额外行可能是您的锯齿状圆圈的原因。

下面的一些内容（context.beginPath和context.closePath）

<强> 2。您不必在Shape gameObjects中将“空”function Shape个对象添加到clearRect。

第3。 ......是的，正如你在你的问题中猜测的那样，如果你没有在用context.beginPath()绘制之间清除画布，那么你的绘图就会累积。但人们会期望圆圈更加均匀模糊而不是锯齿状。

<强> context.beginPath

beginPath

开始组装一组新的路径命令，并丢弃任何先前组装的路径。

它还将绘图“笔”移动到画布的左上角原点（== coordinate [0,0]）。

虽然是可选的，但您应始终使用beginPath

开始路径

丢弃是一个重要且经常被忽视的问题。如果您没有使用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>正确启动它的第二个红色笔划。结果是“X”正确地同时具有红色和蓝色笔划。

beginPath

第二个演示在第二个笔画中错误地遗漏了stroke()。结果是“X”错误地具有两个红色笔划。

第二个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

context.closePath

从当前笔位置绘制一条线回到起始路径坐标。

例如，如果绘制2条线形成三角形的两条腿，则closePath将通过将第三条腿的第三条腿从第二条腿的端点拉回到第一条腿的起点来“关闭”三角形。

错误概念解释了！

此命令的名称经常导致它被误解。

context.beginPath不是closePath的结尾分隔符。

再次，closePath命令绘制一条线 - 它不会“关闭”一个beginPath。

此示例绘制三角形的两条腿并使用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>实际上正在做的是从第二条腿的端点画一条线回到第一条腿的起点。

{{1}}

Context2d arc（）带有begin path，生成奇怪的圆圈

1 个答案: