html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下
复制代码代码如下:
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();
cxt.restore();
}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);
html5时钟代码菜鸟课程,html5绘制时钟动画相关推荐
- python动态时钟代码_python实现简易动态时钟
本文实例为大家分享了python实现简易动态时钟的具体代码,供大家参考,具体内容如下 from turtle import * from datetime import * #移动到指定位置 def ...
- python数码时钟代码_python实现简易数码时钟
最近迷上了Python,要说为什么呢?Python语法简单,功能强大,有广泛的第三方库能快速编程实现自己的想法(无需重复去造轮子).就像某位前辈说的:"人生苦短,学会偷懒-",配置 ...
- 用python动态时钟代码_python实现简易动态时钟
本文实例为大家分享了python实现简易动态时钟的具体代码,供大家参考,具体内容如下 from turtle import * from datetime import * #移动到指定位置 def ...
- java数字时钟代码,[Java教程]Javascript 数字时钟
[Java教程]Javascript 数字时钟 0 2012-10-14 22:00:11 Javascript代码部分: 在body标签中添加以下Html代码: 本文网址:http://www.sh ...
- 电脑罗盘时钟代码_轻松吃透实时时钟芯片DS1302软硬件设计
今天我们来讨论一款老掉牙的实时时钟芯片DS1302.什么是实时时钟(RealTime Clock, RTC)呢?为什么我们需要它呢?假设你使用单片机实现万年历应用,一般的做法是这样的:设置中断后判断1 ...
- html5 苹果 代码,iOS 8 HTML5性能测试:苹果有多爱HTML5?
(本文由CocoaChina翻译自跨平台移动Web开发框架Sencha的博客,作者Ross Gerbasi.) 我们和其他人一样,对于前不久苹果iOS 8的发布感到十分激动.在做这个测试的时候,我们手 ...
- html5对代码自动排版,HTML5系列:通过JS+DIV+CSS排版布局实现选项卡效果
CSS介绍及布局特点 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现 ...
- python中用turtle绘制时钟_python使用turtle库绘制时钟
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
最新文章
- 语音控制 python_python有没有语音控制模块
- Ubuntu中输入输出重定向及管道技术简述
- Linux给GCC编译的应用程序创建服务
- English trip -- VC(情景课)5 Around Town
- 目录管理,创建、删除、移动目录,创建、删除、移动文件
- 策略模式在公司项目中的运用实践,看完又可以涨一波实战经验了!
- HTML5使用Div标签来实现表格
- Linux 之 利用Google Authenticator实现用户双因素认证
- 5分钟学会使用DataHub接入实时数据到MaxCompute(原ODPS)
- 推荐一下干货-------为什么你的app不耐看
- GitHub桌面版汉化
- 清华EMBA课程系列思考之十七(1) -- 新企业的孵化与创业投资
- 计算机网络是由网络硬件网络软件,计算机网络系统主要由网络硬件系统和网络软件系统组成。...
- InoReader——网页无法打开
- 【Gitee + Hexo】从0开始搭建自己的博客网站
- DEBUG:惠普打印机页边距总是不对
- 此计算机无法访问移动网络,IT教程:为什么打电话显示无法访问移动网络
- ui加Java岗位_本人不怕加班,java和ui学哪个好,打算以后往产品经理方向发展?...
- 谭浩强C语言(第三版)习题10.4
- 过渡、变形 transform、3d变形、关键帧动画13
热门文章
- 行星齿轮设计手册_合理选用行星齿轮传动装置的侧隙
- python websocket server_用Python实现一个简单的WebSocket服务器
- git clone 一部分_Git/GitHub 中文术语表 | Linux 中国
- UAC bypass 理论学习
- 一些恶意软件的分析收集整理
- linux7.3搭建dns,Centos7.3搭建DNS服务器--BIND
- checkbox控件的checked属性作用是_VB6基本控件的使用,制作一个数据输入窗口
- 日光能和电池两用计算机,计算机类专业竞赛模拟试题(doc 7页)全面优秀版优秀版...
- cbow word2vec 损失_word2vec是如何得到词向量的?
- hive能替代oracle_173-Hive