利用空余时间学习一下html5.
 <!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500"></canvas>
<script>
var clock=document.getElementById('clock');
var cxt = clock.getContext('2d');
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时必须获取浮点类型(小时+分数转化成的小时);
hour= hour+min/60;
//问题:2014年8月18日 22:08:41
//将24小时进制转换成12小时
hour= hour>12?hour-12:hour;
//表盘(蓝色)
cxt.lineWidth=10;
cxt.strokeStyle="blue";
//刻度
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//时刻度
for(var i=0;i<12;i++){
cxt.save();//保持当前状态
cxt.lineWidth=10;//设置时针的粗细
cxt.strokeStyle="#000";//设置时针颜色
cxt.translate(250,250);//设置0,0点
cxt.rotate(i*30*Math.PI/180);//设置旋转角度(=角度*Math*PI/180)
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();//释放状态
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();//保持当前状态
cxt.lineWidth=5;//设置时针的粗细
cxt.strokeStyle="#000";//设置时针颜色
cxt.translate(250,250);//设置0,0点
cxt.rotate(i*6*Math.PI/180);//设置旋转角度(=角度*Math*PI/180)
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();//释放状态
}
//时针
cxt.save();
//设置时针风格
cxt.lineWidth=10;
cxt.strokeStyle="#000";
//设置异次元空间的0,0点
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180)//设置旋转角度
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore(); //分针
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="#000";
//设置异次元空间的0,0点
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180)//设置旋转角度
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore(); //秒针
cxt.save();
cxt.lineWidth=3;
cxt.strokeStyle="red";
//设置异次元空间的0,0点
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180)//设置旋转角度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针,分针,秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
//设置填充样式
cxt.fillStyle="yellow";
cxt.fill();
//设置笔触样式
cxt.stroke();
//设置秒针钱小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
//设置填充样式
cxt.fillStyle="yellow";
cxt.fill();
//设置笔触样式
cxt.stroke();
cxt.restore();
}
//使用setInterval(代码,毫秒时间)时钟转动
drawClock();
setInterval(drawClock,1000);
</script>
</body> </html>

显示效果:

html5学习(一)--canvas画时钟的更多相关文章

  1. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  2. canvas画时钟

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

  3. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  4. canvas画时钟,重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  5. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  6. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  7. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  8. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  9. 用canvas画时钟

    效果图在博客首页上. html: <canvas id="canvas" >Your browser does not support canvas</canva ...

随机推荐

  1. Round #169 (Div. 2)D. Little Girl and Maximum XOR

    1.首先是要找到一个位置从左至右,作l这一个是0,r这一个是1. 2.实例01011,10100.你将能够找到01111和10000. #include<cstdio> #include& ...

  2. AngularJS+ASP.NET MVC+SignalR实现消息推送

    原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现 ...

  3. 每天收获一点点------Hadoop基本介绍与安装配置

    一.Hadoop的发展历史 说到Hadoop的起源,不得不说到一个传奇的IT公司—全球IT技术的引领者Google.Google(自称)为云计算概念的提出者,在自身多年的搜索引擎业务中构建了突破性的G ...

  4. Angular绑定数据时转义html标签

    AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}&l ...

  5. 字符串属性 NSMutableAttributedString/NSAttributedString

    因为iOS7新出的NSTextStorge是NSMutableAttributedString的子类.所以要用好NSTextStorage.首先要学好NSMutableAttributedString ...

  6. sharepoint 2013 更改用户配置文件属性值的方法 modify user profile

    在此前写了两篇文章sharepoint 的UserProfile博客 sharepoint 2010 获取用户信息UserProfile方法 sharepoint 2010 怎样用SocialComm ...

  7. android activity 后的形式 藏

    activity 希望的形式 于AndroidManifest.xml  建立 theme 属性 <activity             android:name="zicox.u ...

  8. JS中call、apply的用法说明

    JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...

  9. 私人定制javascript事件处理机制(浅谈)

    看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...

  10. Mac OS X于Android Kernel下载方法

    于上一篇日志中,我总结了大家提供的下载Android源代码的方法.这里再简单总结一下内核的下载方法. 參考这里的介绍:http://source.android.com/source/building ...