canvas仿iwatch时钟效果

效果图：

图（1）

图（2）

代码如下：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
*{margin:0; padding:0;}
body{ background:#000; text-align:center;}
canvas{ background:#fff;}
</style>
<script>
function toDou(iNum){
 return iNum<10?'0'+iNum:''+iNum;
}
function d2a(n){
 return n*Math.PI/180;
}
window.onload = function(){
 var oC = document.getElementById('c1');
 var gd = oC.getContext('2d');
 var cx = oC.width/2,
 cy = oC.height/2;
 function clock(){
 gd.clearRect(0,0,oC.width,oC.height);
 var oDate = new Date();
 var H = oDate.getHours()%12;
 var M = oDate.getMinutes();
 var S = oDate.getSeconds();
 var MS = oDate.getMilliseconds();
 drawArc(60,0,(H*30+M/60*30),'orange');
 drawArc(80,0,(M*6+S/60*6),'purple');
 drawArc(100,0,(S*6+MS/1000*6),'aqua');
 var str = toDou(H)+':'+toDou(M)+':'+toDou(S);
 gd.font = '20px 微软雅黑';
 gd.textAlign = 'center';
 gd.textBaseline = 'middle';
 gd.fillText(str,cx,cy);
 }
 clock()
 setInterval(clock,1);
 function drawArc(r,s,e,color){
 color = color||'black';
 gd.beginPath();
 gd.arc(cx,cy,r,d2a(s-90),d2a(e-90),false);
 gd.strokeStyle = color;
 gd.lineWidth = 20;
 gd.stroke();
 }
};
</script>
</head>
<body>
 <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js Canvas绘制圆形时钟效果

    本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px

  • JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    JavaScript学习小结之使用canvas画“哆啦A梦”时钟

    前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说 今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈 然后是上代码 html部分 <canvas id="

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • javascript结合Canvas 实现简易的圆形时钟

    javascript结合Canvas 实现简易的圆形时钟

    之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟.时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下: 演示效果: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程 第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid

  • canvas 绘制圆形时钟

    canvas 绘制圆形时钟

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>canvas clock</title> <style type="text/css"> div{ text-align: cen

  • JavaScript html5 canvas绘制时钟效果(二)

    JavaScript html5 canvas绘制时钟效果(二)

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么

  • JS+Canvas绘制时钟效果

    本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t

  • canvas仿iwatch时钟效果

    canvas仿iwatch时钟效果

    效果图: 图(1) 图(2) 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0;} body{ background:#000; text-align:center;} canvas{ background:#fff;} </st

  • canvas实现粒子时钟效果

    canvas实现粒子时钟效果

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制 将绘制数字的函数命名为renderDigit().在该函数中,将粒子绘制为一个小圆.小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1).由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(

  • JS+Canvas绘制动态时钟效果

    本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #

  • JavaScript canvas动画实现时钟效果

    JavaScript canvas动画实现时钟效果

    本文实例为大家分享了canvas动画实现时钟效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • Android仿小米时钟效果

    Android仿小米时钟效果

    我在一个[博客] android高仿小米时钟(使用Camera和Matrix实现3D效果)上面看到了小米时钟实现.特别感兴趣.就认真的看了一遍.并自己敲了一遍.下面说下我自己的理解和我的一些改进的地方效果真的特别棒就发布了自己的时钟应用. 先上图(电脑没有gif截图软件.大家凑合看.哪个软件好也可以给我推荐下) 话不多说,首先自定义控件XimiClockView继承view  并做一些初始化的操作 看到的漂亮时钟图片我自己画的效果图(以后妈妈再也不用担心我迟到了) public XimiCloc

  • JavaScript Canvas绘制圆形时钟效果

    JavaScript Canvas绘制圆形时钟效果

    本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0

  • JavaScript canvas实现七彩时钟效果

    JavaScript canvas实现七彩时钟效果

    利用canvas写七彩时钟! 1.题目 (1).拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现) 2.思路 (1).首先我们要充分了解到canvas画布元素里面的图形以及线段的画法,圆的画法,时针.分针.秒针的画法: (2).其次,是要在页面布局渲染出一个时钟的图形,画出刻度的位置,以及时针分针秒针的位置的静态效果,方便后面定时器来实现动态效果: (3).做好这些工作后,最难的地方是如何将时针分针和秒针与刻度一一对应,那么我们就要用到圆的弧度制,让定时器

  • Android Canvas自定义实现时钟效果

    Android Canvas自定义实现时钟效果

    Android之Canvas自定义画一个时钟,供大家参考,具体内容如下 自定义控件,在安卓是也是一种无所不能的技术了,所有自带控件,以及组合自带控件不能实现的一些效果,我们都可以通过自定义控件来实现,不过,如果能有系统控件使用的就用系统自带的控件去实现,而不必要用自定义去实现,我们都知道,自定义控件在一定的程度上,效率往往会比系统自带的控件效率低,所以我不到万不得已,不要使用自定义控件,今天用自定一控件,实现一个小小的时钟,具体的实现在代码中注释功能. ClockView.java public

  • JS+Canvas实现动态时钟效果

    JS+Canvas实现动态时钟效果

    基于Canvas制作的动态时钟demo,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></script> <script

随机推荐