<meta charset="utf-8">
<canvas width="1000" height="1000" id="clockCanvas" style="border:1px solid red;">
您的浏览器版本太低,不支持显示时钟的canvas标签
</canvas>
<script>
var clockID = document.getElementById("clockCanvas");
var clock = clockID.getContext("2d");
function drawClock(id){
//*每次清空画布(在给定矩形内清空一个矩形:)
clock.clearRect(0,0,1000,1000);
//获取系统当前时间(时 、分 、秒)
var now = new Date();
var sec = now.getSeconds();
var mins = now.getMinutes();
var hours = now.getHours();
//绘制文字,显示系统当前时间:
clock.save(); //*保存之前状态
clock.translate(0,500); //*更换原点(0,0)位置为(0,500)
clock.fillStyle = "#f00";
clock.strokeStyle = "#eee";
clock.font = "bold 20px 微软雅黑";
clock.strokeText("系统当前时间为:"
+hours+"时"
+mins+"分"
+sec+"秒", 100, 100);
clock.fillText("系统当前时间为:"
+hours+"时"
+mins+"分"
+sec+"秒", 100, 100); //*在画布上输出的文本及位置
clock.restore();
//计算:满60分加一小时
hours = hours + mins/60;
//计算:将24小时制转化为12小时制
hours = hours>12?hours-12:hours;
//1.画表盘
clock.beginPath();
clock.lineWidth = 10;
clock.strokeStyle = "#ff00ff";
clock.arc(300, 300, 200, 0, 360, false);
clock.stroke();
clock.closePath();
//2.画刻度盘
//2.1 时刻度
for(var i = 0; i < 12; i++){
clock.save();
//将起始点定位到圆心
clock.translate(300,300);
//设置刻度的样式
clock.lineWidth = 7;
clock.strokeStyle = "#999999";
//设置旋转角度
clock.rotate(i*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, -190);
clock.font = "normal 20px impack";
clock.textAlign = "left";
clock.textBaseLine = "top";
clock.strokeText(i, i*(-50)*Math.PI/180, -150);
clock.closePath();
//画刻度线
clock.stroke();
clock.restore();
}
//2.2 分刻度
for(var j = 0; j<60; j++){
clock.save();
//设置起始点坐标
clock.translate(300,300);
clock.lineWidth = 5;
clock.strokeStyle = "#999999";
//设置旋转角度
clock.rotate(j*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0, -180);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//3.1 时针
clock.save();
clock.translate(300,300);
clock.lineWidth = 7;
clock.strokeStyle = "#000000";
//设置小时的旋转角度,没转一次走30°
clock.rotate(hours*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0,15);
clock.lineTo(0,-120);
clock.stroke();
clock.closePath();
clock.restore();
//3.2 分针
clock.save();
clock.translate(300, 300);
clock.rotate(mins*6*Math.PI/180);
clock.lineWidth = 5;
clock.strokeStyle = "#000";
clock.beginPath();
clock.moveTo(0,20);
clock.lineTo(0,-160);
clock.stroke();
clock.closePath();
clock.restore();
//3.3 秒针
clock.save();
clock.translate(300,300);
clock.rotate(sec*6*Math.PI/180);
clock.lineWidth = 3;
clock.strokeStyle = "#f00";
clock.beginPath();
clock.moveTo(0, 25);
clock.lineTo(0,-165);
clock.stroke();
clock.closePath();
//3.3.1 秒针圆心处一个小圈
clock.fillStyle = "#999";
clock.strokeStyle = "#f00";
clock.beginPath();
clock.arc(0,0,6,0,360,false);
clock.fill();
clock.stroke();
clock.closePath();
//3.秒针顶部一个小圈
clock.beginPath();
clock.arc(0,-140,6,0,360,false);
clock.fill();
clock.stroke();
clock.closePath();
clock.restore();
};
drawClock();
setInterval(drawClock,1000);
</script>

canvas 模拟时钟的更多相关文章

  1. 练手WPF(一)——模拟时钟与数字时钟的制作(上)

    一.Visual Studio创建一个WPF项目. 简单调整一下MainWindow.xaml文件.主要使用了两个Canvas控件,分别用于显示模拟和数字时钟,命名为AnalogCanvas.digi ...

  2. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  3. 模拟时钟(AnalogClock)和数字时钟(DigitalClock)

    Demo2\clock_demo\src\main\res\layout\activity_main.xml <LinearLayout xmlns:android="http://s ...

  4. 结合 CSS3 & Canvas 模拟人行走的效果

    HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

  5. 经典!HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  6. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  7. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  8. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

随机推荐

  1. [linux系统]XFS (vda3):Corruption detected.Unmount and run xfs_repair 简单解决办法

    今天kvm的centos系统,rm -rf时报错,具体如下: rm: cannot remove ‘log-0/case1/log_net’: Input/output errorrm: cannot ...

  2. 如何增加Ubuntu交换空间swap

    如何增加Ubuntu交换空间swap 1  使用命令查看系统内swap分区大小 green@green:~$ free -m total used free shared buff/cache ava ...

  3. 搭建apache本地服务器·Win

    1.下载apache地址:https://www.apachelounge.com/download/ 注意:下载压缩包如下 httpd-2.4.37-win64-VC15.zip 其中根据自己电脑的 ...

  4. 2019春下载的sublime text都无法自动安装package control:解决办法

    之前电脑的原因卸载了,于是重新安装sublime text3. 发现问题了.Package Control无法自动安装. 于是一通常用操作. 1.copy 安装码(你知道的)到control安装,失败 ...

  5. FineUI 相关

    FineUI 相关(ExtAsp.Net 2008-2017),记在这把,免得找不到了. 不知道同年代的类似项目Coolite怎么样了?更名为Ext.net了,在国外活得还算滋润,在国内嘛..死贵死贵 ...

  6. oracle:SQL时间段

    oracle: SQL时间段 CREATEDATE between to_date('" + startDate + " 00:00:00','yyyy-mm-dd hh24:mi ...

  7. Verify_Execute 验证SQL语句执行结果

    #region Verify_Execute /// <summary> /// 验证insert.update.delete执行 /// </summary> /// < ...

  8. [转载]URI、 URL 和 URN 的区别

    1. URI URI = Universal Resource Identifier 统一资源标志符 URI采用一种特定语法标识一个资源的字符串.所标识的资源可能是服务器上的一个文件.不过,也可能是一 ...

  9. GRU and LSTM

    门控循环单元(GRU): 背景: 当时间步数较大或者时间步数较小的时候,循环神经网络的梯度较容易出现衰减或者爆炸.虽然裁剪梯度可以应对梯度爆炸, 但是无法解决梯度衰减的问题.正因为如此,循环神经网络在 ...

  10. webServices接口开发过程中项目启动遇到的错误org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read schema document 'http://www.springframework.org/schema/beans/spring-bean

    org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read ...