javascript - 与矩形相比，绘制圆形真的如此低效吗？

Question

我正在用 JavaScript 开发一个非常小的项目，只是为了帮助我从下到上理解 Canvas 。我现在尽量避免使用框架之类的东西，这样我就可以理解 HTML5 游戏的基本功能。

这是一个相当基本的“光标移动器”，带有逐渐消失的尾部。就是这样。只是一种颜色的形状，根据玩家的输入移动，尾部逐渐消失。我建议你尝试一下；其实很漂亮。

无论如何，显然我更喜欢光标是圆形的，因为它看起来更平滑。然而，每当我这样做时，浏览器几乎完全锁定我。它显然有效，至少在很大程度上是有效的，但它比乌龟在冷冻花生酱中奔跑还要慢。

我知道我不应该只包含 JSFiddle，但它包含大量代码，而且整个运行速度很慢。

问题很可能出现在绘图函数中:

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   //this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

这些线路由方法标记。 1 对应圆形，2 对应矩形。

这是整个项目:http://jsfiddle.net/w4Rg3/3/

我只是觉得很难相信有圈子会慢得多(在看到 JS 可以做的所有项目之后)，而且我可能做错了什么。

Answer 1

大家好!我发现问题了!它与我的游戏结构或任何特别挑剔的东西无关。只是一个 API 问题!

问题确实出在我第一篇文章中问题的代码示例中。

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.beginPath();  /*THIS IS FIXED*/
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
/*1*/   this.context.closePath();  /*THIS IS FIXED*/
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

我确保用“此已修复”注释标记了我添加的行。我认为它之前只是创建了一个非常非常长的弧线并一遍又一遍地绘制它，但谁知道呢？不管怎样，问题解决了，而且看起来很漂亮。