HTML5 Canvas实战
5.6 摆钟
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

创建Animation类

创建直线运动

创建加速度

创建振荡运动

摆动的气泡

摆钟

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

创建摆钟
图5-6 创建摆钟

操作步骤

按照以下步骤,使摆钟来回摆动:

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()方法启动动画了。

相关参考

  • 第1章 绘制直线
  • 第2章 绘制圆
  • 第2章 使用自定义图形和填充样式

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验