9、炮弹与弹弓应用开发详解

炮弹与弹弓应用开发详解

1. 弹弓绘制

在弹弓应用中，通过定义两个函数 Sling 和 drawsling 新增了一种对象类型。理想化的弹弓由 4 个位置表示，绘制弹弓就是基于这 4 个点绘制四条线段。HTML5 允许将线段作为路径的一部分进行绘制，绘制路径可以选择描边或填充，对于弹弓只需绘制线条。

以下是 drawsling 函数的代码：

function drawsling() {
   ctx.strokeStyle = this.strokeStyle;
   ctx.lineWidth = 4;
   ctx.beginPath();
   ctx.moveTo(this.bx,this.by);
   ctx.lineTo(this.s1x,this.s1y);
   ctx.moveTo(this.bx,this.by);
   ctx.lineTo(this.s2x,this.s2y);
   ctx.moveTo(this.s1x,this.s1y);
   ctx.lineTo(this.s2x,this.s2y);
   ctx.lineTo(this.s3x,this.s3y);
   ctx.stroke();
}

该函数的具体操作如下：
- 向路径中添加从 bx, by 到 s1x, s1y 的线段。
- 向路径中添加从 bx, by 到