10、弹弓应用开发全解析

弹弓应用开发全解析

1. 绘制线段

在开发弹弓应用时，绘制线段是基础操作。这里有一个 Sling 函数，它类似于其他构造函数，如 Ball 。以下是 Sling 函数的代码：

function Sling(bx,by,s1x,s1y,s2x,s2y,s3x,s3y,styleString) {
    this.bx = bx;
    this.by = by;
    this.s1x = s1x;
    this.s1y = s1y;
    this.s2x = s2x;
    this.s2y = s2y;
    this.s3x = s3x;
    this.s3y = s3y;
    this.strokeStyle = styleString;
    this.draw = drawSling;
    this.moveit = moveSling;
}

Sling 函数将 drawSling 设置为在使用 Sling 对象调用 draw 时会被调用的函数。若后续对应用进行扩展，移动弹弓位置时， moveSling 函数就会被调用。

绘制弹弓实际上就是基于四个点绘制四条线段。HTML5 允许我们将线段作为路径的一部分来绘制，就像之前绘制圆时使用路径一样。绘制线段可能需要两个步骤：先移动到线段的一端，然后进行绘