html5绘制时钟动画


Posted in HTML / CSS onDecember 15, 2014

<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>

复制代码
代码如下:

var clock=document.getElementById("clock");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour>12?hour-12:hour;
hour=hour+min/60;
//表盘(蓝色)
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=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
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.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分针刻度
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
// 设置时针风格
cxt.lineWidth=7;
cxt.strokeStyle="black";
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=5;
cxt.strokeStyle="black";
//设置异次元空间分针画布的中心
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.strokeStyle="red";
cxt.lineWidth=3;
//重置原点
cxt.translate(250,250);
//设置角度
//cxt.rotate(330*Math.PI/180);
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.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();
//画出秒针的小圆点
cxt.beginPath();
cxt.arc(0,-140,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();</p> <p> cxt.restore();</p> <p>}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);

html5绘制时钟动画

HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
html5的canvas方法使用指南
Dec 15 #HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 #HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 #HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 #HTML / CSS
HTML5中drawImage用法分析
Dec 01 #HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 #HTML / CSS
You might like
实用函数7
2007/11/08 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python删除文本中行数标签的方法
2018/05/31 Python
详解重置Django migration的常见方式
2019/02/15 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python TCP包注入方式
2020/05/05 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
会计专业自荐信
2013/12/02 职场文书
医生进修自我鉴定
2014/01/19 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
安全生产目标责任书
2014/04/14 职场文书
个人综合鉴定材料
2014/05/23 职场文书
人事任命书怎么写
2014/06/05 职场文书
基层党组织整改方案
2014/10/25 职场文书
质检员岗位职责
2015/02/03 职场文书
员工离职通知函
2015/04/25 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Python作用域和名称空间的详细介绍
2022/04/13 Python