canvas+js时钟特效

运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果:

<!--网页文档的声明-->
<!doctype html>
<html>
<!--网页的头部-->
<head>
<meta charset="UTF-8">
<!--网页三要素-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="关键词描述">
<title>时钟效果</title>
<!--CSS层叠样式表 加工 修饰-->
<style type="text/css">
*{margin:0;padding:0;}
body{background:url("img/2.jpg");}
#canvas{margin:100px auto;display:block;}
</style>
</head>
<!--网页的主体-->
<body>
<canvas id="canvas" width="500" height="500">
你的浏览器需要更新了更新请前往 www.xxx.com*——*
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');//获取上下文
var cxt = canvas.getContext('2d');//绘图轨迹 线 圆 矩形..
/*圆
cxt.beginPath();//开始
//cxt.fillStyle = "#006633";填充颜色
cxt.strokeStyle = "#ff00ff";
cxt.arc(250,250,200,0,360,false);//画圆方法
//cxt.fill();填充
cxt.stroke();
cxt.closePath();//结束
*/
clock()
function clock(){
cxt.clearRect(0,0,500,500)
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour = hour + min/60;
hours = hour>12?hour-12:hour;
//表盘
cxt.beginPath();
cxt.lineWidth =10;//线宽
cxt.strokeStyle = "#00ccff";
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//分秒刻度 60个
for (var i=0;i<60 ;i++ )
{
cxt.save();
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.lineWidth = "7";
cxt.strokeStyle ="#fff";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时刻度
for (var i =0;i<12 ;i++ )
{
cxt.save();
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.lineWidth = "7";
cxt.strokeStyle ="#ff0000";
cxt.beginPath();
cxt.moveTo(0,-175);
cxt.lineTo(0,-195);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();//保存
cxt.strokeStyle = "yellow"
cxt.translate(250,250);
cxt.rotate(30*hours*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-100);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();//保存
cxt.strokeStyle = "#00ff00";
cxt.lineWidth ="7";
cxt.translate(250,250);
cxt.rotate(6*min*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.strokeStyle = "red";
cxt.lineWidth ="3";
cxt.translate(250,250);
cxt.rotate(6*sec*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.fillStyle ="gray";
cxt.arc(0,0,5,0,360,false);
cxt.fill();
cxt.beginPath();
cxt.strokeStyle ="red";
cxt.arc(0,0,6,0,360,false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth ="1";
cxt.strokeStyle ="red";
cxt.moveTo(0,-150);
cxt.lineTo(4,-130);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth ="1";
cxt.strokeStyle ="red";
cxt.moveTo(0,-150);
cxt.lineTo(-4,-130);
cxt.stroke(); cxt.restore();
}
setInterval(clock,1000) //console.log(hour+'时'+min+'分'+sec+'秒')
</script>
</body>
</html>

利用js+canvas实现的时钟效果图的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  4. canvas做的时钟,学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...

  5. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  6. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

  8. JS 数据类型转换-转换函数、强制类型转换、利用js变量弱类型转换

    1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型 ...

  9. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

随机推荐

  1. [Flex] ButtonBar系列——flex3 ButtonBar属性labelPlacement标签相对于指定图标的方向

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...

  2. jquery on off 方法

    $("p").on("click",function(){alert("The paragraph was clicked.");}); $ ...

  3. Java 线程间通讯(管道流方式)

    一.管道流是JAVA中线程通讯的常用方式之一,基本流程如下: 1)创建管道输出流PipedOutputStream pos和管道输入流PipedInputStream pis 2)将pos和pis匹配 ...

  4. SparkSQL使用之如何使用UDF

    使用java开发一个helloworld级别UDF,打包成udf.jar,存放在/home/hadoop/lib下,代码如下: package com.luogankun.udf; import or ...

  5. windows常用运行命令收集(持续更新)

    快捷键打开运行窗口:Windows + R > calc(计算器) > gpedit.msc(本地组策略编辑器) > regedit(注册表) > mstsc(远程桌面) &g ...

  6. HTTP权威指南----缓存

    缓存的处理步骤: 1.接收----缓存从网络中读取抵达的请求报文2.解析----缓存对报文进行解析,提取出URL和各种首部3.查询----缓存查看是否有本地副本可用,如果没有,就获取一份副本(并将其保 ...

  7. Maven中央存储库

    当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没有找到,然后把它会从默 ...

  8. Android Studio使用中的小常识

    1.如何继承抽象类? 1.1新建一个类如下: public class PersonDBOpenHelper{ } 1.2手写extends 你继承的类名 public class PersonDBO ...

  9. win7下Oracle 11的安装

    把下载的win32_11gR2_database_1of2.zip和win32_11gR2_database_2of2.zip解压到一个database文件夹下,运行安装文件   Oracle11的卸 ...

  10. NSSet、NSMutableSet

    NSSet和NSArray功能性质一样,用于存储对象,属于集合:只能添加cocoa对象,基本数据类型需要装箱. NSSet . NSMutableSet是无序的集合,在内存中存储方式是不连续的,而NS ...