利用html5制作一个时钟动画
<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(); cxt.restore(); }
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);
利用html5制作一个时钟动画的更多相关文章
- html5制作一个时钟
试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...
- 利用javafx编写一个时钟制作程序
1.首先创建一个时钟类,用于编写时钟的各种特有属性 package javaclock; /** * * @author admin */import java.util.Calendar;impor ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- 利用DreamweaverCS5制作一个含有动态标题的教程
DreamweaverCS5怎么制作一个含有动态标题?做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会让网页更生动,下面我就介绍一下怎么制作一个含有动态的标题 做一个网页 ...
- 分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布 ...
- 3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...
- 利用XPT2046制作一个电位器AD转换装置
XPT2046是一款四线制电阻触摸屏控制芯片,内含12位分辨率125KHz转换速率逐步逼近型A/D转换器,支持从1.5V到5.25V的低电压I/O接口. 所谓逐步逼近型,就是输入一个模拟量,其与100 ...
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...
- 利用Qt制作一个helloworld
使用QT创建第一个 工程: 1.打开应用程序: 2.单击画面中间偏上的 New Project按钮.[要学习使用啊~,传说它的跨平台行很好,QQ就是用它编辑的.] 3.直接点击右下角的选择 按钮. 4 ...
随机推荐
- JSP里的<c:if>不起作用[待解答]
JSP页面的部分代码如下: 下面的title作为请求参数,shoppingCart作为session范围域的属性. 问题1: 如果去掉<c:if>的判断条件,第一行打印:可以正常显示出来, ...
- react 问题
安装依赖报错问题 可能需要按顺序安装, 不能cnpm npm 混合安装, 参考react项目入门 react an ...
- 自己WIN7旗舰版安装 SQLServer2005/2008的一些总结
准备工作:下载安装包,当然要保证安装包能用: 安装:1.设置setup.exe文件 右键属性选择 --兼容,兼容下面选择---以管理员方式运行,---兼容模式选择windows xp或者windows ...
- Java多线程编程实战指南(核心篇)读书笔记(二)
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/76651408冷血之心的博客) 博主准备恶补一番Java高并发编程相 ...
- 【剑指offer】第一个只出现一次的字符
原创博文,转载请注明出处!本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 2.思路 空间换时间.建立一个哈希表,第一次扫描字符串时,统计每个字符的出现次数.第二次扫描字符 ...
- Git详解之八 Git与其他系统
以下内容转载自:http://www.open-open.com/lib/view/open1328070454218.html Git 与其他系统 世界不是完美的.大多数时候,将所有接触到的项目全部 ...
- sqlserver获取代理服务作业job的执行情况
以下脚本为获取sqlserver的执行job with testtemp as( SELECT sch.job_id,--his.[server] as InstanceName CONVERT(nv ...
- BZOJ4831: [Lydsy1704月赛]序列操作(非常nice的DP& 贪心)
4831: [Lydsy1704月赛]序列操作 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 250 Solved: 93[Submit][Statu ...
- java面试题02
1.JAVA内部使用的编码格式是(utf-8) 2. public class Threads2 implements Runnable { @Overridepublic void run() {S ...
- HTTP Client Performance Improvements
HTTP Client Performance Improvements https://blogs.msdn.microsoft.com/webdev/2018/10/17/asp-net-core ...