用canvas画时钟
效果图在博客首页上。
html:
<canvas id="canvas" >Your browser does not support canvas</canvas>
css:
canvas {
display:block;
margin:60px auto;
border:1px solid black;
}
js:
<script>
window.onload=function(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
canvas.width=800;
canvas.height=600;
/*获取时间*/
function colock(){
var myDate=new Date();
var myHour=myDate.getHours();
var myMin=myDate.getMinutes();
var mySec=myDate.getSeconds();
/*背景*/
ctx.save();
ctx.rect(0,0,800,600);
ctx.fillStyle='#ddd';
ctx.fill();
ctx.stroke();
ctx.restore();
/*表盘*/
ctx.save();
ctx.beginPath();
ctx.arc(400,300,200,0,2*Math.PI,true);
ctx.fillStyle='#fff';
ctx.strokeStyle="#ffee00";
ctx.lineWidth=20;
ctx.fill();
ctx.closePath();
ctx.stroke();
ctx.restore();
/*数字*/
ctx.save();
ctx.beginPath();
ctx.font="15px Arial";
ctx.fillStyle='black';
var num=['3','4','5','6','7','8','9','10','11','12','1','2'];
var r=150;
//ctx.arc(100,100,150,0,2*Math.PI,true);
for(var i=0;i<12;i++){
ctx.fillText(num[i],400+r*Math.cos(i*30*Math.PI/180),300+r*Math.sin(i*30*Math.PI/180));
}
ctx.closePath();
ctx.restore();
/*时针*/
ctx.save();
ctx.beginPath();
ctx.translate(400,300);
ctx.rotate((myHour-3)*30*Math.PI/180+(30*myMin/60)*Math.PI/180);
ctx.lineTo(-20,0);
ctx.lineTo(60,0);
ctx.lineWidth=8;
ctx.closePath();
ctx.strokeStyle='black';
ctx.stroke();
ctx.restore();
/*分针*/
ctx.save();
ctx.beginPath();
ctx.translate(400,300);
ctx.rotate((myMin-15)*6*Math.PI/180+Math.PI/2+(6*mySec/60)*Math.PI/180);
ctx.lineTo(0,20);
ctx.lineTo(0,-90);
ctx.lineWidth=6;
ctx.closePath();
ctx.strokeStyle='#333';
ctx.stroke();
ctx.restore();
/*秒针*/
ctx.save();
ctx.beginPath();
ctx.translate(400,300);
ctx.rotate((mySec-15)*6*Math.PI/180+Math.PI/2);
ctx.lineTo(0,20);
ctx.lineTo(0,-120);
ctx.lineWidth=3;
ctx.closePath();
ctx.strokeStyle='red';
ctx.stroke();
ctx.restore();
}
colock();
setInterval(colock,1000);
}
用canvas画时钟的更多相关文章
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- canvas 画时钟 会动呦
//半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...
- html5学习(一)--canvas画时钟
利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- [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> <!--简 ...
- 简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
随机推荐
- Lock file left by a different patch, OPatch will not try re-using the lock file.
OPatch在打补丁的过程中被中断,重新执行后报以下错误: UtilSession failed: Lock file left by a different patch, OPatch will n ...
- 最简单的Tcp Udp的例子
//1.WinSock包含2个主要的版本,即WinSock1和WinSock2.前者需要包含头文件WinSock.h和库文件wsock32.lib,后者需要包含头文件WinSock2.h和库文件ws2 ...
- Summary: Final Keyword
In this tutorial we will learn the usage of final keyword. final keyword can be used along with vari ...
- 转:windows 7系统安装与配置Tomcat服务器环境
工具/原料 jdk-7u45-windows-x64(我的系统是64位系统,32位的请选x86下载) apache-tomcat-8.0.0-RC5-windows-x64 方法/步骤 下载说明, ...
- TImageList 和 TlistView 组件(C++Builder)
__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { //加载图标到Imagelist Graphics::TBitmap *bm ...
- php-引号中出现$
当双引号中包含变量时,变量对应的值会与双引号中的内容连接在一起: 当单引号中包含变量时,变量会被当做字符串输出. 慕课网,I love you!慕课网,$love
- Android -- 自定义View小Demo,绘制钟表时间(一)
1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发 ...
- oracle的散列聚簇表
在簇表中,Oracle使用存储在索引中的键值来定位表中的行, 而在散列聚簇表中,使用了散列函数代替了簇索引,先通过内部函数或者自定义的函数进行散列计算,然后再将计算得到的码值用于定位表中的行. 创建散 ...
- PDO讲解
PDO的知识点标注在代码里 <?php //造DSN:驱动名:dbname=数据库名:host=服务器地址 $dsn="mysql:dbname=mydb;host=localhost ...
- 通过HP Loadrunner VuGen来录制安卓的应用
作者:Richard Pal 来自:perftesting 翻译:Elaine00 通过这篇文章,我将介绍如何通过HP Loadrunner VuGen来测试一个安卓应 ...