快捷导航
查看: 74|回复: 0

[代码实例] canvas绘制圆盘走动钟表效果

[复制链接]
发表于 2017-1-9 18:34:06 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-9 18:34 编辑

canvas绘制圆盘走动钟表效果:
分享一段代码实例,它实现了利用canvas绘制钟表的功能。
并且钟表指针能够自动走动,实时的获取本机事件。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  background: #ccc;
}
#c {
  background: #fff;
}
</style>
<script>
window.onload = function() {
  var oC = document.getElementById('c');
  var oC1 = oC.getContext('2d');


  setInterval(toDraw, 1000)
  toDraw()

  function toDraw() {
    var x = 200; // x轴坐标
    var y = 200; // y轴坐标
    var r = 150; // r 半径
    // 清空画布
    oC1.clearRect(0, 0, oC.width, oC.height)
      // 获取时间
    var oDate = new Date();
    var oHours = oDate.getHours(); //时
    var oMin = oDate.getMinutes(); //分
    var oSen = oDate.getSeconds(); //秒

    var oHoursVal = (oHours * 30 - 90 + oMin / 2) * Math.PI / 180;
    var oMinVal = (oMin * 6 - 90) * Math.PI / 180;
    var oSenVal = (oSen * 6 - 90) * Math.PI / 180;

    // 绘制秒针表盘
    oC1.beginPath();
    for (var i = 0; i < 60; i++) {
      oC1.moveTo(x, y);
      oC1.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
    }
    oC1.closePath();
    oC1.stroke();

    // 绘制大圆盘 (覆盖)
    oC1.fillStyle = "#fff";
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.95, 0, 360 * Math.PI / 180, false);
    oC1.closePath();
    oC1.fill();

    // 绘制分针表盘
    oC1.lineWidth = 3;
    oC1.beginPath();
    for (var i = 0; i < 12; i++) {
      oC1.moveTo(x, y);
      oC1.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
    }
    oC1.closePath();
    oC1.stroke();
    // 绘制大圆盘 (覆盖)
    oC1.fillStyle = "#fff";
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.9, 0, 360 * Math.PI / 180, false);
    oC1.closePath();
    oC1.fill();

    // 绘制时针
    oC1.lineWidth = 5;
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.5, oHoursVal, oHoursVal, false);
    oC1.closePath();
    oC1.stroke();

    // 绘制分针
    oC1.lineWidth = 3;
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.7, oMinVal, oMinVal, false);
    oC1.closePath();
    oC1.stroke();

    // 绘制秒针
    oC1.lineWidth = 1;
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.8, oSenVal, oSenVal, false);
    oC1.closePath();
    oC1.stroke();

    // 中心点
    // 绘制大圆盘 (覆盖)
    oC1.fillStyle = "red";
    oC1.beginPath();
    oC1.moveTo(x, y);
    oC1.arc(x, y, r * 0.05, 0, 360 * Math.PI / 180, false);
    oC1.closePath();
    oC1.fill();
  }
}
</script>
</head>
<body>
  <canvas id="c" height="400" width="400"></canvas>
</body>
</html>

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-2-23 17:20 , Processed in 0.084562 second(s), 20 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表