效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas clock</title>
</head>
<body>
<canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas = document.getElementById('clock');
var clock = canvas.getContext('2d');
var r = canvas.width/2.5; //半径
function drowClock(){
//清除画布 clock.clearRect(0, 0, 800, 800);
var now = new Date();
var secd = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时必须获取浮点类型(小时+分数转化的小时)
//时间格式19:23:30
//将24小时进制装换为12小时进制
hour = hour + (min / 60);
hour = hour > 12 ? hour - 12 : hour;
//外圈
clock.beginPath();
clock.lineWidth = 10;
clock.strokeStyle = "#d9d9d9";
clock.arc(250, 250, 200, 0, 360, false);
clock.stroke();
clock.closePath();
//刻度
//时刻度
for (var i = 0; i < 12; i++) {
clock.save();
//设置时针的粗细
clock.lineWidth = 7;
//设置时针的颜色
clock.strokeStyle = "#727272";
//先设置0,0点
clock.translate(250, 250);
//再设置旋转角度
clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//分刻度
for (var i = 0; i < 60; i++) {
clock.save();
//设置时针的粗细
clock.lineWidth = 3;
//设置时针的颜色
clock.strokeStyle = "#727272";
//先设置0,0点
clock.translate(250, 250);
//再设置旋转角度
clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度
clock.beginPath();
clock.moveTo(0, -180);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//时针
clock.save();
clock.lineWidth = 7;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(hour * 30 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -140);
clock.lineTo(0, 30);
clock.stroke();
clock.closePath();
clock.restore();
// 文字
for(i = 0;i<12;i++){
angle = i * 30;
// 转换为弧度制,Math.sin、Math.cos都接受弧度制单位
angle = angle*Math.PI/180;;
font = (i + 3 > 12)?i+3-12 : i+3;
fontX = 245+Math.round(Math.cos(angle)*(r-45));
fontY = 256+Math.round(Math.sin(angle)*(r-45));
clock.font = 'bold 16px 微软雅黑';
clock.fillText(font+'',fontX,fontY);
}
//分针
clock.save();
clock.lineWidth = 5;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(min * 6 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -160);
clock.lineTo(0, 30);
clock.stroke();
clock.closePath();
clock.restore();
//秒针
clock.save();
clock.lineWidth = 3;
clock.strokeStyle = "#727272";
clock.translate(250, 250);
clock.rotate(secd * 6 * Math.PI / 180);
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, 30);
clock.closePath();
clock.stroke();
//画交叉点
clock.beginPath();
clock.arc(0, 0, 5, 0, 360, false);
clock.closePath();
clock.fillStyle = "#ebebeb";
clock.fill();
clock.stroke();
clock.beginPath();
clock.arc(0, -150, 5, 0, 360, false);
clock.closePath();
clock.fillStyle = "gray";
clock.fill();
clock.stroke();
clock.restore(); window.requestAnimationFrame(drowClock);
}
//使用setInternal(代码,(毫秒)时间) 让时钟动起来
drowClock();
// setInterval(drowClock, 1000);
</script>
</body>
</html>

html5、canvas绘制本地时钟的更多相关文章

  1. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  2. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  3. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  4. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  5. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  8. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  9. html5 canvas绘制环形进度条,环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

随机推荐

  1. MyEclipse 常用快捷键

    MyEclipse 常用快捷键 编辑: Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等) Ctrl+Shift+F 格式化当前代码 ...

  2. 安装两个tomcat

    编辑环境变量:vi /etc/profile 加入以下代码(tomcat路径要配置自己实际的tomcat安装目录) ##########first tomcat########### CATALINA ...

  3. C#之反射

    Assembly assembly = Assembly.Load("PeopleDal"); //获取程序集名称 Module[] modules = assembly.GetM ...

  4. 111. for(元素变量x:遍历对象obj)

    package com.chongrui.test;/* * for(元素变量x:遍历对象obj){ * 引用X的java语句 *  * } *  *  * */public class test { ...

  5. lodash

    lodash常用函数一 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. 一些linux命令

    1. more 慢慢查看文件2. mkdir -p 递归的创建目录3. tree 4. ls -lh 人性化显示

  7. UVA 12300 Smallest Regular Polygon(正多边形)

    题意:给出两点,求经过这两点的正n边形的最小面积 题解:这两点一定是最长的弦,我们设正多边形中点c,找到c到每个点的距离(都相同) 我们知道那个等腰三角形的底与每个角度就使用余弦定理 #include ...

  8. Idea在src下不能编译XML文件

    IDEA编译XML文件,如果需要在src下编译就需要在maven配置中加如下配置: <build> <finalName>SpringDemo</finalName> ...

  9. Myeclipse运行报错:an out of memory error has occurred的解决方法

    不知道怎么了,重装的myeclipse2013,里边就放了一个项目,启动myeclipse就报 an out of memory error has occurred....... 一点yes就退出 ...

  10. .NET string字符串的截取、移除、替换、插入

    在实际开发中经常要用到string的各种截取等操作,在这里总结自己认为经常出现的.NET 字符串的截取.移除.替换.插入操作,方面以后查阅. 前台代码: <%@ Page Language=&q ...