EaselJS Triangle Stroke

Question

我和EaselJS合作重新创造了我在现实生活中看到的东西，而且我对三角形笔画有轻微的问题。

在上图中，您可以看到我的三角形。我理解角落A以及为什么它不会像其他人一样被填充，但我希望它被填满。我怎么能这样做呢？

因为它不包含我的代码段，我的JavaScript是：

var stage = new createjs.Stage('c'),
    poly = new createjs.Shape(),
    s = 400,
    h = s * (Math.sqrt(3)/2),
    x = stage.canvas.width/2+s,
    y = stage.canvas.height/2+s/2;

poly.graphics.beginStroke('#0da4d3').setStrokeStyle(75)
  .moveTo(x,y).lineTo(x+s/2,y+h).lineTo(x-s/2,y+h).lineTo(x,y);
stage.addChild(poly);
stage.update();

createjs.Ticker.addEventListener('tick', handleTick);

function handleTick(e) {
  stage.update();
}



window.onresize = function() {
  stage.canvas.width = $(window).width();
  stage.canvas.height = $(window).height();
}
stage.canvas.width = $(window).width();
stage.canvas.height = $(window).height();

以及指向CodePen的链接：http://codepen.io/Spedwards/pen/hqvsc

另外，作为一个小问题，为什么我的舞台只在Ticker中更新？

Answer 1

您可以使用closePath（）;

修复角点问题

poly.graphics.beginStroke('#0da4d3').setStrokeStyle(75);
poly.graphics.moveTo(x,y).lineTo(x+s/2,y+h).lineTo(x-s/2,y+h).closePath();

http://codepen.io/anon/pen/fyxvI

至于自动收报机 - 这就是CreateJS的设计方式。我认为这与游戏开发有关。在设置动画时，您可以100％确定“tick”处理程序中的所有操作都已在下一个“tick”处理之前执行。

Answer 2

正如kihu回答的那样，你只需要在图形中添加closePath。请查看文档：{​​{3}}

对于您的子问题：舞台在stage.update()电话的屏幕上绘制内容。在您的示例中，此调用位于每个tick事件执行的函数内，即每秒~24次。您只需要在绘制新内容时调用stage.update（例如，当您向舞台添加其他对象时，或者移动，旋转或对舞台中已有的对象执行其他变换时）。因此，在您的情况下，只需在将形状添加到舞台后以及在窗口调整大小事件之后调用update方法。