5.6 摆钟

优质

小牛编辑

130浏览

2023-12-01

跟上一节的气泡不同，气泡的宽度和高度随时间而变化。本节，我们将创建一个摆钟，摆钟的角度随时间而变化。

操作步骤

按照以下步骤，使摆钟来回摆动：

1. 链接到Animation类：

<head>
<script src="animation.js"> </script>

2. 实例化一个Animation对象，并获取画布上下文对象：

<script>
window.onload  = function(){
  var anim  = new Animation("myCanvas"); 
  var canvas  = anim.getCanvas();
  var context  = anim.getContext();

3. 定义摆钟的属性：

  var amplitude  = Math.PI  /  4;  //  45 degrees
  var period  =  4000;  // ms
  var theta  =  0;
  var pendulumLength  =  250;
  var pendulumWidth  =  10;
  var rotationPointX  = canvas.width  /  2;
  var rotationPointY  =  20;

4. 设置stage()函数，该函数更新摆钟的角度，清除画布，再绘制摆钟：

  anim.setStage(function(){
    //更新
    theta  =  (amplitude  * Math.sin((2  * Math.PI  * this.getTime())  / period))  + Math.PI  /  2;
    //清除
    this.clear();
    //绘制顶端的圆
    context.beginPath();
    context.arc(rotationPointX, rotationPointY,  15,  0, 2  * Math.PI, false);
    context.fillStyle  = "#888"; 
    context.fill();
    // 绘制顶点的内圆
    context.beginPath();
    context.arc(rotationPointX, rotationPointY,  10,  0,  2  * Math.PI, false);
    context.fillStyle  = "black"; 
    context.fill();
    //绘制摆轴
    context.beginPath();
    var endPointX  = rotationPointX  +  (pendulumLength  *  Math.cos(theta));
    var endPointY  = rotationPointY  +  (pendulumLength  *  Math.sin(theta));
    context.beginPath();
    context.moveTo(rotationPointX, rotationPointY); 
    context.lineTo(endPointX, endPointY); 
    context.lineWidth  = pendulumWidth; 
    context.lineCap  = "round";
    context.strokeStyle  = "#555";
    context.stroke();
    // 绘制底部的圆
    context.beginPath();
    context.arc(endPointX, endPointY,  40,  0,  2  * Math.PI, false);
    var grd  = context.createLinearGradient(endPointX  -  50, endPointY  -  50, endPointX  +  50, endPointY  +  50);
    grd.addColorStop(0, "#444");
    grd.addColorStop(0.5, "white"); 
    grd.addColorStop(1, "#444"); 
    context.fillStyle  = grd;
    context.fill();
  });

5. 启动动画：

  anim.start();
  };
  </script>
</head>

6. 在HTML文档的body部分嵌入canvas标签：

<body>
<canvas id="myCanvas" width="600" height="330" style="border:1px solid black;">
</canvas>
</body>

工作原理

页面加载完成后，我们可以实例化一个Animation对象，并得到画布及其上下文对象。其次，我们可以定义摆钟的属性，包括角振幅，周期，起始角度，摆钟长度、宽度，和旋转中心。

摆钟初始化完成后，我们就可以设置stage()函数，用于根据简谐振荡方程式更新摆钟的角度，清除画布，再立即重绘摆钟。

创建摆钟时，我们可在旋转点绘制几个圆形摆盘，并从旋转点到摆钟重心绘制一条粗线作为摆轴，然后在摆轴末端绘制一个大圆盘，在圆盘上有一条灰色的渐变对角线，用来创造抛光面的错觉感。

最后，stage()函数被设置完成后，我们便可以调用start()方法启动动画了。

5.6 摆钟

操作步骤

工作原理

相关参考