①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟。

<canvas id="myCanvas" width="600" height="300"></canvas>

②在JavaScript中通过getElementById函数得到Canvas对象,并创建画笔。

 var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");

③定义三个变量,slen表示秒针,mlen表示分钟,hlen表示时针,并分别赋值。

 var slen=60;
var mlen=50;
var hlen=40;

④开始绘制图形,设置填充色,以坐标点(200,150)为圆心,半径为100,起始弧度为0,终点弧度为360,绘制一个圆形

  cxt.beginPath();
cxt.strokeStyle="#00f";
//绘制一个以(200,150)为圆心,100为半径,起始弧度为0,终止弧度为360的圆
cxt.arc(200,150,100,0,2*Math.PI,true);
cxt.stroke();
cxt.closePath();

⑤重新开始绘制图形,将当前起始点移动到坐标点(200,150),并将当前坐标系逆时针旋转90;

cxt.beginPath();
cxt.translate(200,150); //平移当前起始点坐标
cxt.rotate(-Math.PI/2); //逆时针旋转90
cxt.save(); //保存当前路径

⑥通过一个算法完成绘制时钟时刻和数字,并且在每5个刻度后将当前坐标系顺时针旋转60

 //完成绘制时针刻度和数字,并且在每5个刻度后将当前坐标系顺时针旋转60度。
for(var i=0;i<60;i++){
if(i%5==0){
cxt.fillRect(80,0,20,5);
cxt.fillText(""+(i/5==0?12:i/5),70,0);
}else{
cxt.fillRect(90,0,10,2);
}
cxt.rotate(Math.PI/30);
}
cxt.closePath();

⑦定义三个变量,ls代表当前时间的秒,lm代表当前时间的分,lh代表当前时间的小时,并为其赋初始值0

  //ls当前时间的秒,lm当前的分,lh当前的小时
var ls= 0,lm= 0,lh=0;

⑧定义一个函数,该函数每秒执行一次,用于重新绘制时针、分针和秒针

        function Refresh(){
cxt.restore(); //恢复之前的状态
cxt.save(); //保存状态
cxt.rotate(ls * Math.PI / 30); //根据秒针旋转坐标
cxt.clearRect(5, -1, slen+1, 2+2); //清除秒针
cxt.restore(); //恢复之前的状态
cxt.save(); //保存状态
cxt.rotate(lm * Math.PI / 30); //根据分针旋转坐标
cxt.clearRect(5, -1, mlen+1, 3+2); //清除分针
cxt.restore();cxt.save(); cxt.rotate(lh * Math.PI / 6); //根据时针旋转坐标
cxt.clearRect(5, -3, hlen+1, 4+2); //清除秒针 var time = new Date(); //获取当前时间
var s = ls=time.getSeconds(); //获取秒
var m = lm=time.getMinutes(); //获取分
var h = lh=time.getHours(); //获取小时
cxt.restore();
cxt.save(); cxt.rotate(s * Math.PI / 30); //根据秒旋转坐标
cxt.fillRect(5, 0, slen, 2); //绘制秒针
cxt.restore(); cxt.save();
cxt.rotate(m * Math.PI / 30); //根据分旋转坐标
cxt.fillRect(5, 0, mlen, 3); //绘制分针
cxt.restore(); cxt.save();
cxt.rotate(h * Math.PI / 6); //根据时旋转坐标
cxt.fillRect(5, -2, hlen, 4); //绘制时针
}

⑨设置每秒钟刷新一次

/设置每秒刷新一次
var MyInterval = setInterval("Refresh();", 1000);
 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas> <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
//定义三个变量分别是秒针,分针,时针
var slen=60;
var mlen=50;
var hlen=40; cxt.strokeRect(0,0, c.width, c.height); cxt.beginPath();
cxt.strokeStyle="#00f";
cxt.fillStyle="#00f";
cxt.arc(200,150,5,0,2*Math.PI,true);
cxt.fill();
cxt.closePath();
cxt.beginPath(); cxt.strokeStyle="#00f";
//绘制一个以(200,150)为圆心,100为半径,起始弧度为0,终止弧度为360的圆
cxt.arc(200,150,100,0,2*Math.PI,true);
cxt.stroke();
cxt.closePath();
//重新绘制,将当前起始点移动到坐标点(200,150),将当前坐标系逆时针旋转90
cxt.beginPath();
cxt.translate(200,150); //平移当前起始点坐标
cxt.rotate(-Math.PI/2); //逆时针旋转90
cxt.save(); //保存当前路径 //完成绘制时针刻度和数字,并且在每5个刻度后将当前坐标系顺时针旋转60度。
for(var i=0;i<60;i++){
if(i%5==0){
cxt.fillRect(80,0,20,5);
cxt.fillText(""+(i/5==0?12:i/5),70,0);
}else{
cxt.fillRect(90,0,10,2);
}
cxt.rotate(Math.PI/30);
}
cxt.closePath(); //ls当前时间的秒,lm当前的分,lh当前的小时
var ls= 0,lm= 0,lh=0;
function Refresh(){
cxt.restore(); //恢复之前的状态
cxt.save(); //保存状态
cxt.rotate(ls * Math.PI / 30); //根据秒针旋转坐标
cxt.clearRect(5, -1, slen+1, 2+2); //清除秒针
cxt.restore(); //恢复之前的状态
cxt.save(); //保存状态
cxt.rotate(lm * Math.PI / 30); //根据分针旋转坐标
cxt.clearRect(5, -1, mlen+1, 3+2); //清除分针
cxt.restore();cxt.save(); cxt.rotate(lh * Math.PI / 6); //根据时针旋转坐标
cxt.clearRect(5, -3, hlen+1, 4+2); //清除秒针 var time = new Date(); //获取当前时间
var s = ls=time.getSeconds(); //获取秒
var m = lm=time.getMinutes(); //获取分
var h = lh=time.getHours(); //获取小时
cxt.restore();
cxt.save(); cxt.rotate(s * Math.PI / 30); //根据秒旋转坐标
cxt.fillRect(5, 0, slen, 2); //绘制秒针
cxt.restore(); cxt.save();
cxt.rotate(m * Math.PI / 30); //根据分旋转坐标
cxt.fillRect(5, 0, mlen, 3); //绘制分针
cxt.restore(); cxt.save();
cxt.rotate(h * Math.PI / 6); //根据时旋转坐标
cxt.fillRect(5, -2, hlen, 4); //绘制时针
} //设置每秒刷新一次
var MyInterval = setInterval("Refresh();", 1000);
</script>
<div id="div1" style=" background:#00f;"></div>
</body>
</html>

Canvas绘制时钟的更多相关文章

  1. 使用canvas绘制时钟

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

  2. HTML5 之Canvas 绘制时钟 Demo

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

  3. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  4. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  5. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  6. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  7. 使用canvas绘制时钟 (http://heeroluo.net/Article/Detail/95)

    准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...

  8. canvas绘制时钟及注释及save和restore的用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. Login控件尝试

    新建web项目,添加default.aspx.Register.aspx.Login.aspx. default.aspx中添加LoginName.LoginStatus,LoginName的Form ...

  2. [iOS]技巧集锦:UITableView自定义Cell中的控件无法完全对齐Cell的左边界和右边界

    这是个很诡异的问题,由于一些特殊需求,我的TableView的Cell的背景色是透明,其中的控件会有背景色,第一个控件和最后一个控件我都用IB自动设了约束,对齐Cell的左边界和右边界,但是自动约束很 ...

  3. ubuntu中用户使用的shell如何指定

    在机器上给同事开了一个账号,结果ssh登陆后,补全,高亮都没有,但是我自己的账号都可以.首先怀疑是.bashrc文件设置有问题,对比2个用户目录的这个文件并未发现可以的地方.搜索得知可能是所使用的sh ...

  4. python3.5批量修改文件名

    考虑到要手工修改许多的文件名太费时,而且网上下载的图片大多如下(完全不能满足强迫症) 就用python来代替我们完成这个过程直接贴上代码 #encoding:utf-8 import os def r ...

  5. Linux shell redirect

    Learn much from here Learn much from here

  6. 进击的Python【第二十一章】

    s14day21 上节内容回顾: 1.请求周期 url> 路由 > 函数或类 > 返回字符串或者模板语言? Form表单提交: 提交 -> url > 函数或类中的方法 ...

  7. [LeetCode] Edit Distance 编辑距离

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  8. SSM集成(一):Mybatis3测试

    Spring4+Mybatis3+SpringMVC(基于注解)整合步聚: 一)Mybatis3测试; 二)Mybatis3+Spring4整合; 三)Mybatis3+Spring4+SpringM ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  10. 未在本地计算机上注册“Microsoft.Jet.OleDb.4.0”提供程序。解决办法

    在64位服务器系统上,默认不支持Microsoft.Jet.OLEDB.4.0的驱动程序,系统默认会提示未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0"的错误 ...