Canvas画布实现自定义时钟效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
.box{
width: 420px;
height: 420px;
margin: 50px auto 0;
}
#cvs{
background: #B1A6BE;
}
</style>
</head>
<body> <div class="box">
<canvas id="cvs" width="420" height="420"></canvas>
</div> <script>
var cvs=document.getElementById('cvs');
var ctx=cvs.getContext('2d');
clock();
setInterval(clock,1000);
function clock(){
var img=document.createElement('img');
img.src='01.jpg';
//时钟背景图
// img.onload=function (){
ctx.beginPath();
ctx.drawImage(img,0,0,420,420);
ctx.closePath();
// }
//时钟外圆
ctx.beginPath();
ctx.arc(210,210,200,0,2*Math.PI,true);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=10;
ctx.stroke();
ctx.clip();
ctx.closePath(); //分刻度 360/60=6
for (var i = 0; i < 60; i++) {
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,-185);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
}; //时刻度 360/12=30
for (var i = 0; i < 12; i++) {
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(i*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,-175);
ctx.lineTo(0,-195);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态
}; //获取当前时间
var dates=new Date();
var h=dates.getHours();
var m=dates.getMinutes();
var s=dates.getSeconds();
h=h+m/60;//12.5小时
m=m+s/60; //画时间
var h2=dates.getHours();
var m2=dates.getMinutes();
var str1=h2>9?h2:'0'+h2;
var str2=m2>9?m2:'0'+m2;
var str=str1+':'+str2;// 09:05
ctx.beginPath();
ctx.font='26px 微软雅黑';
ctx.fillStyle='#5BDA40';
ctx.fillText(str,180,340);
ctx.closePath(); //时针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(h*30*Math.PI/180);
ctx.strokeStyle='#60D9F8';
ctx.lineWidth=8;
ctx.moveTo(0,14);
ctx.lineTo(0,-130);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态 //分针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(m*6*Math.PI/180);
ctx.strokeStyle='#FEF319';
ctx.lineWidth=5;
ctx.moveTo(0,14);
ctx.lineTo(0,-150);
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态 //秒针
ctx.save();//保存状态
ctx.beginPath();
ctx.translate(210,210);
ctx.rotate(s*6*Math.PI/180);
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.moveTo(0,14);
ctx.lineTo(0,-170);
ctx.stroke();
ctx.closePath(); //秒针上的圆
ctx.beginPath();
ctx.fillStyle='#FEF319';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,-155,5,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath(); //中心圆
ctx.beginPath();
ctx.fillStyle='#FEF319';
ctx.strokeStyle='#FB1F11';
ctx.lineWidth=3;
ctx.arc(0,0,8,0,2*Math.PI,true);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();//恢复之前保存的状态 }
</script>
</body>
</html>
Canvas画布实现自定义时钟效果的更多相关文章
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
随机推荐
- jdbc驱动的类加载过程
这段时间跟类加载机制是干上了. 这一篇来分析一下jdbc工作过程中涉及到的类加载流程,重点是想看看在双亲委派模型不适用的时候,如何解决. 第一步,加载数据库的驱动 Class.forName(&quo ...
- Day3-函数及作用域
一.函数定义:一组代码片段用函数名封装起来,通过函数名的方式调用执行. 特性: 1.减少重复代码 2.使程序易扩展 3.使程序易维护 语法定义: def sayhi(): print("he ...
- 在Eclipse如何实现在xml文件实现代码提示
通常我们创建xml文件时, 总会在编辑代码的时候不能像编辑Java文件那样进行自动提示或者补全.其实这个是可以实现的,下面我就以struts2.xml进行示范: 1.点击"winbdows& ...
- Hierarchy Viewer工具使用
目前,在eclipse的ADT Android插件中,还不能启动Hierachy Viewer,但可以从Android SDK工具包中,通过命令行的方式可以启动,具体方法为,到Android SDK下 ...
- 解决selenium驱动Firefox跳转页慢慢慢的问题
首先我给自己定义为是一个更新偏执狂.不知道从哪个版本开始,使用selenium驱动打开Firefox浏览器时,会跳转到官网指定页,这个过程真是慢得要死. 为了解决这个问题,我是查了很多资料,解决方案是 ...
- wampServer 2.5 64位 更改"www 目录"不成功
已经指到自己新目录了,修改了 apache的httpd.conf里面的内容如下 修改: DocumentRoot "e:/phproot/" 修改: <Directory & ...
- HttpClien Get&Post
新公司上班第二周,开始进军.Net Core,这方面的东西比较新,所以已经封装好的东西比较少,比如HttpClien之类的开源类库,找了NuGet好久,没有找到,所以先写个简陋的来用着先. 引用: u ...
- python 2.7中urllib 2 与python 3.5中 urllib的区别。
python 3.x中urllib库和urilib2库合并成了urllib库. 其中urllib2.urlopen()变成了urllib.request.urlopen() urllib2.Reque ...
- 一天搞定HTML----标签语义化04
根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签 标签语义化作用: 代码演示 通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化 注意: 标签语义化,不仅仅只是指使 ...
- A comparison of local caches (1) 【本地缓存之比较 (1)】
1. Spring local cache [Spring 本地缓存] Spring provided cacheable annotation since 3.1. It's very supe ...