closePath() 移动多边形

Question

下面的代码是制作一个简单的三角形所需要的。我想将三角形保持在那个确切位置并将其添加到我的 canvas.

can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();

如果您运行下面的代码，三角形会出现一瞬间然后消失。我需要它和三个方程一起留在那里。我创建了函数 path();努力使三角形位于左上角。我不确定如何将三角形保持在那里并完成所有这些操作。

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> 3+3=<input type="text" id="q1" />
    </div>
  <div id="eqn2"> 3+2=<input type="text" id="q2" />
    </div>
  <div id="eqn3"> 5+2=<input type="text" id="q3" />
    </div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">

var m=1;

  var stage = new createjs.Stage("gameCanvas");
  var obj=[];
 
can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
function startGame() {
   
    obj[1] = new createjs.DOMElement(document.getElementById(`eqn`));
    obj[2] = new createjs.DOMElement(document.getElementById(`eqn`));
    stage.addChild(obj[1]);
    stage.addChild(obj[2]);
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setFPS(60);
    function handleTick(event){
    drop(1);
    drop(2);
    path();
    stage.update();
    }
}
 function drop(i){
      obj[1].x =40;
      obj[1].y =50;
      obj[2].x =300;
      obj[2].y =50;
 }
function path(){
ctx.x=1;
ctx.y=1;
}
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
</html>

Answer 1

看看这个：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Math Game</title>
  <script src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
</head>

<body onload="startGame();">
  <div class="canvasHolder1">
    <div id="eqn1"> 3+3=<input type="text" id="q1" /></div>
    <div id="eqn2"> 3+2=<input type="text" id="q2" /></div>
    <div id="eqn3"> 5+2=<input type="text" id="q3" /></div>
    <canvas id="gameCanvas" width="600" height="200">Not supported</canvas>
  </div>

  <script>
    var stage = new createjs.Stage("gameCanvas");
    var can = document.getElementById("gameCanvas");
    var ctx = can.getContext("2d");
    var obj = [];

    function drawTriangle() {
      ctx.beginPath();
      ctx.moveTo(1, 20);
      ctx.lineTo(20, 100);
      ctx.lineTo(70, 100);
      ctx.closePath();
      ctx.stroke();
    }

    function startGame() {
      obj[1] = new createjs.DOMElement(document.getElementById("eqn1"));
      obj[1].x = 40;
      obj[1].y = 50;
      stage.addChild(obj[1]);

      obj[2] = new createjs.DOMElement(document.getElementById("eqn2"));
      obj[2].x = 300;
      obj[2].y = 50;
      stage.addChild(obj[2]);

      stage.update();
      drawTriangle();
    }
  </script>
</body>

</html>

你可以看到我创建了一个新函数 drawTriangle 它将在你的 startGame 结束时调用，这样三角形就是 canvas 中最后绘制的项目。

我不确定你为什么需要 Ticker 所以我删除了它，和其他功能一样，它们对我来说没有多大意义，不需要你在时刻.

现在解决你的问题......在我的实现中，我将 drawTriangle 作为 startGame 中的最后一个动作，但是如果我们改变顺序，就像这样：

      drawTriangle();
      stage.update();

三角形消失了！

我有根据的猜测是 stage.update() 清除了整个 canvas 并绘制了它“知道”三角形绘制发生在舞台外的内容，因此我们需要始终在之后绘制它。

正在查看 update 的代码文档：
https://www.createjs.com/docs/easeljs/files/easeljs_display_Stage.js.html#l349
有一个 if 语句 if (this.autoClear) { 完全符合我们在您的示例中看到的内容，并且 autoClear 的默认值为 true:
https://www.createjs.com/docs/easeljs/classes/Stage.html#property_autoClear

还值得指出...有一种原生的 createjs 画线方式：

你的方法没有任何问题，你同时使用了 createjs 并通过 getContext("2d") 直接在 canvas 中绘图你只需要相应地计划，但我的建议是，如果有本地人方法我会坚持，这里是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Math Game</title>
  <script src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
</head>

<body onload="startGame();">
  <div class="canvasHolder1">
    <div id="eqn1"> 3+3=<input type="text" id="q1" /></div>
    <canvas id="gameCanvas" width="600" height="160">Not supported</canvas>
  </div>

  <script>
    function startGame() {
      var stage = new createjs.Stage("gameCanvas");
      var eqn1 = new createjs.DOMElement(document.getElementById("eqn1"));
      eqn1.x = eqn1.y = 50;
      stage.addChild(eqn1);
      
      var triangle = new createjs.Shape();
      triangle.graphics.beginStroke("black")
      triangle.graphics.moveTo(1, 20);
      triangle.graphics.lineTo(20, 100);
      triangle.graphics.lineTo(70, 100);
      triangle.graphics.lineTo(1, 20);
      stage.addChild(triangle);

      stage.update();
    }
  </script>
</body>
</html>

closePath() 移动多边形

closePath() Moving Polygon

html

javascript

css

canvas

jsfiddle