用H5的canvas做时钟
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="can1" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('can1');
var cxt=canvas.getContext('2d');
function drawClock(){
cxt.clearRect(0,0,500,500);
var date=new Date()
var m=date.getSeconds();
var j=date.getMinutes();
var k=date.getHours();
//表盘
cxt.beginPath();
cxt.strokeStyle="blue";
cxt.lineWidth="10";
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//表心
cxt.beginPath();
cxt.strokeStyle="#AA1514";
cxt.lineWidth="1";
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.closePath();
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="7";
cxt.translate(250,250);
cxt.rotate(30*i*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.strokeStyle="black";
cxt.lineWidth="5";
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//画秒针
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="1";
cxt.translate(250,250);
cxt.rotate(6*m*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-130,3,0,360,false);
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.moveTo(0,12);
cxt.lineTo(0,-160);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="4";
cxt.translate(250,250);
cxt.rotate(6*j*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-150);
cxt.closePath();
cxt.stroke();
cxt.restore();
//时针
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="6";
cxt.translate(250,250);
cxt.rotate(30*k*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,8);
cxt.lineTo(0,-140);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
setInterval("drawClock()",1000);
</script>
</body>
</html>
用H5的canvas做时钟的更多相关文章
- 用canvas绘制时钟
用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...
- canvas做的时钟,学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas实现时钟
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
随机推荐
- TortoiseSVN 过滤文件(包括已提交和未提交)
一:svn 设置过滤文件方式 1.选中需要过滤的文件夹或者文件---右键---TortoiseSVN---Add to Ignore list(如果不显示说明该目录已经被添加) 2.在当前工作区域 不 ...
- runtime使用小例子 - 给对象O-C属性赋值
这些日子在家里学习runtime,看runtime的一些方法和前辈们的博客,我也尝试着写几个runtime有效的运用 一.给对象属性赋值,例如一个WebEntity类 她有三个属性:NSString. ...
- BZOJ4590: [Shoi2015]自动刷题机
显然看着就是二分,仔细看的话显然刷的题数随n增大单调不升. 挂了一发是因为无解输出一个-1而不是两个…… #include<cstdio> #include<algorithm> ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- ObjectInputStream类和ObjectInputStream类的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. ObjectInputStream和ObjectInputStream类创建的对象被称为对象输入流和对象输出流. 创建文件输出流代码: FileO ...
- js022-高级技巧
js022-高级技巧 本章内容: 使用高级函数 防篡改对象 Yielding Timers 22.1 高级函数 1.安全的类型检测 2.作用域安全的构造函数 构造函数实际上是一个使用new操作符调用的 ...
- datatable group by
对datatable 里面的数据按某一特定的栏位进行分组并且按照某一规则 var query = from t in rate.AsEnumerable() group t by new { t1 ...
- Centos7.X 源码编译安装subversion svn1.8.x
说明:SVN(subversion)的运行方式有两种:一种是基于Apache的http.https网页访问形式:还有一种是基于svnserve的独立服务器模式.SVN的数据存储方式也有两种:一种是在B ...
- Hermite Curve
http://paulbourke.net/miscellaneous/interpolation/ http://fivedots.coe.psu.ac.th/Software.coe/Java%2 ...
- Robot Framework--13 RFS+AutoItLibrary测试web上传下载
转自:http://blog.csdn.net/tulituqi/article/details/21888059 Selenium2library在我们实际测试web页面的时候基本上已经够用了,不过 ...