Question

我正在尝试在屏幕上随机生成5个形状，并随机调整大小并以随机半径旋转。

我已经设置了大部分内容，除了我不能让我的几个形状旋转，它主要是lineTo形状（我的三角形，矩形和圆形正在工作）。

这是我的代码的JSfiddle，我认为它与我的绘图函数有关。

我感谢任何意见！

,lastInsertedID;dim lastInsertedID as string = SELECT LAST_INSERT_ID()

Answer 1

https://jsfiddle.net/y10ubvwr/1/

//drawing cloud
Star.prototype.update = function () {
  this.counter += this.sign * this.speed;
    mainContext.save()
    mainContext.beginPath();
  mainContext.translate(Math.cos(this.counter /100)*this.radius, Math.sin(this.counter / 100)*this.radius);
    mainContext.moveTo(this.xPos, this.yPos);
    mainContext.lineTo((this.xPos +50),(this.yPos ));
    mainContext.lineTo((this.xPos +0), (this.yPos +50));
    mainContext.lineTo(this.xPos, (this.yPos+40));
    mainContext.closePath();
    mainContext.fillStyle = 'rgba(0, 51, 153,' + this.opacity + ')';
    mainContext.fill();
mainContext.restore()
}

您忘记了钻石和星标更新功能中的计数器更新。

此外，您在每个形状中逐点移动，忘记将半径放在某些点上。注意如何使用context.translate使动画更平滑，而不是每个更新功能多次手动计算每个apppont的位置。您每个形状调用Math.cos和Math.sin最多8次，而您只能调用一次。

不能让形状移动

1 个答案: